資訊專欄INFORMATION COLUMN
摘要：滑屏組件自定義滑屏組件，可定制滑屏動(dòng)畫可控制每屏動(dòng)畫效果訪問滑屏組件必填傳入滑動(dòng)容器選填滑動(dòng)時(shí)切換動(dòng)畫，默認(rèn)選填記錄當(dāng)前瀏覽頁(yè)面選填切換完成回調(diào)選填下滑完成時(shí)回調(diào)選填上滑完成時(shí)回調(diào)選填滑動(dòng)過程動(dòng)畫效果必填，傳入滑動(dòng)容器選填，滑動(dòng)時(shí)切換動(dòng)
slide
滑屏組件
自定義滑屏組件，可定制滑屏動(dòng)畫
可控制每屏動(dòng)畫效果
Installgit clone https://github.com/jayZOU/slide.git npm install gulp
訪問http://localhost:8080/
Examples /**
* slide 滑屏組件
* @author jayzou
* @time 2015-10-25
* @version 0.0.1
* @class Slide
* @param String wrap 必填 傳入滑動(dòng)容器ID
* @param String currentClass 選填 滑動(dòng)時(shí)切換動(dòng)畫class，默認(rèn)current
* @param boolean startLocalstorage 選填 記錄當(dāng)前瀏覽頁(yè)面
* @param {Object} onChange 選填 切換完成回調(diào)
* @param {Object} onDownChange 選填 下滑完成時(shí)回調(diào)
* @param {Object} onUpChange 選填 上滑完成時(shí)回調(diào)
* @param {Object} defaultClass 選填 滑動(dòng)過程動(dòng)畫效果
**/
var slide = new Slide({
wrap: "wrap", //必填，傳入滑動(dòng)容器ID
currentClass: "current", //選填，滑動(dòng)時(shí)切換動(dòng)畫class
startLocalstorage: false, //選填，是否開啟localstorage記錄頁(yè)面返回后是否回到上次訪問的頁(yè)面，默認(rèn)false
onChange: function(){ //選填，每屏切換完成時(shí)的回調(diào)
console.log("onchange");
},
onDownChange: function(){ //選填，下滑完成時(shí)回調(diào)
console.log("onDownChange");
},
onUpChange: function(){ //選填，上滑完成時(shí)回調(diào)
console.log("onUpChange");
},
defaultClass: { //選填，滑動(dòng)過程動(dòng)畫效果
"webkitTransition": "-webkit-transform 0.5s ease", //需要加前綴
"transform": "translate(0px, 0px)" //不需要加前綴
},
});
// slide.next(); //下一頁(yè)
// slide.prev(); //上一頁(yè)
// slide.playTo(3); //直接跳轉(zhuǎn)第n頁(yè)
// console.log(slide.getPage()); //獲取為當(dāng)前頁(yè)數(shù)
// slide.lockPage(); //鎖住屏幕，禁止滑動(dòng)
// slide.unLockPage(); //解鎖屏幕，允許滑動(dòng)
//輔助類
// slide.toggleClass(targ, className); //置換class
// slide.addClass(targ, className); //添加class
// slide.removeClass(targ, className); //刪除class
// slide.css(o, style); //添加style樣式
Notes
滑動(dòng)容器只能傳入ID值，不允許傳入class
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/91545.html
摘要：關(guān)于輪播圖的實(shí)現(xiàn)算是前端的一個(gè)基礎(chǔ)，其實(shí)實(shí)現(xiàn)起來是很簡(jiǎn)單，這里把實(shí)現(xiàn)的基本思路總結(jié)一下。推薦使用，它是一款開源的移動(dòng)端腳本框架，它可以完美的實(shí)現(xiàn)在移端開發(fā)的大多數(shù)事件，如點(diǎn)擊滑動(dòng)拖動(dòng)多點(diǎn)觸控等事件。 關(guān)于輪播圖的實(shí)現(xiàn)算是前端的一個(gè)基礎(chǔ)，其實(shí)實(shí)現(xiàn)起來是很簡(jiǎn)單，這里把實(shí)現(xiàn)的基本思路總結(jié)一下。輪播圖的實(shí)現(xiàn)方案有很多種方式，可以用純js來實(shí)現(xiàn)，也可用css來實(shí)現(xiàn)，我們這里主要用到了css3的過...
摘要：使用安裝從小程序基礎(chǔ)庫(kù)版本或以上及開發(fā)者工具或以上開始，小程序支持使用安裝第三方包。節(jié)點(diǎn)用于承載滑動(dòng)時(shí)所展示的節(jié)點(diǎn)，其寬度應(yīng)于傳入的相同。 微信小程序仿微信SlideView組件。 使用 1、安裝 slide-view 從小程序基礎(chǔ)庫(kù)版本 2.2.1 或以上、及開發(fā)者工具 1.02.1808300 或以上開始，小程序支持使用 npm 安裝第三方包。 npm install --save...
摘要：對(duì)，滑動(dòng)式幻燈片的關(guān)鍵就在于隱藏。在條件里我們添加一個(gè)事件相當(dāng)于滑動(dòng)后的回掉，依賴這個(gè)事件在幻燈片滑動(dòng)執(zhí)行完畢后立即執(zhí)行里面的閃回操作。通過添加事件監(jiān)聽滑動(dòng)是否結(jié)束從而迅速閃回，達(dá)到貌似無(wú)限滑動(dòng)的效果。 slider輪播組件，在各類網(wǎng)站上出現(xiàn)及其頻繁，有漸隱式的，滑動(dòng)式的等等一系列。栗子在這: 但我當(dāng)初學(xué)習(xí)寫輪播時(shí)卻被各種入門教程搞得焦頭爛額。不是代碼太復(fù)雜，就是封裝太嚴(yán)重，初學(xué)者很難...
閱讀 1352·2021-11-25 09:43
閱讀 1914·2021-11-12 10:36
閱讀 6046·2021-09-22 15:05
閱讀 3493·2019-08-30 15:55
閱讀 2027·2019-08-26 14:06
閱讀 3654·2019-08-26 12:17
閱讀 515·2019-08-23 17:55
閱讀 2462·2019-08-23 16:23
