資源預(yù)加載組件――preload
Install:
git clone https://github.com/jayZOU/preload.gitnpm installnpm run es6
訪問http://localhost:8080/es6-demo
Examples <audio pSrc="../public/audio/a.mp3" preload="auto" controls></audio> <audio pSrc="../public/audio/b.mp3" preload="auto" controls></audio> <img pSrc="../public/image/b1.jpg" alt=""> <img pSrc="../public/image/b2.jpg" alt=""> <img pSrc="../public/image/b3.jpg" alt=""> <img pSrc="../public/image/b4.jpg" alt=""> /** * Preload 資源預(yù)加載組件 * @author jayzou * @time 2016-1-12 * @version 1.0.6 * @class Preload * @param {object} sources 必填 加載隊(duì)列容器,支持隊(duì)列加載以及加載一個(gè)隊(duì)列后傳入回調(diào) * @param {boolean} isDebug 選填 是否開啟debug選項(xiàng),用于移動(dòng)端調(diào)試,默認(rèn)false * @param {object} connector 選填 后臺(tái)數(shù)據(jù)接口,可選擇同步或異步 * @param int loadingOverTime 選填 預(yù)加載超時(shí)時(shí)間,默認(rèn)15, 單位:秒 * @param {object} loadingOverTimeCB 選填 預(yù)加載超時(shí)回調(diào) * @param {object} wrap 選填 進(jìn)度條容器,返回記載進(jìn)度信息 * @param {object} completeLoad 選填 完成所有加載項(xiàng)執(zhí)行回調(diào),包括同、異步獲取數(shù)據(jù) **/ var preload = new Preload({ isDebug: true, sources: { imgs: { source: [ "../public/image/b2.jpg", "../public/image/b1.jpg" ], callback: function() { console.log("隊(duì)列1完成"); } }, audio: { source: [ "../public/audio/a.mp3", "../public/audio/b.mp3" ] }, imgs2: { source: [ "../public/image/b3.jpg", "../public/image/b4.jpg", "http://7xl041.com1.z0.glb.clouddn.com/OrthographicCamera.png", "http://7xl041.com1.z0.glb.clouddn.com/audio.gif", ], callback: function() { console.log("隊(duì)列3完成"); } } }, loadingOverTime: 3, loadingOverTimeCB: function(res) { console.log("資源加載超時(shí):", res); }, connector: { int1: { url: 'http://localhost/test/index.php?callback=read&city=上海市', jsonp: true }, int2: { url: 'http://localhost/test/index.php?callback=read&city=深圳市', jsonp: false, callback: function(data) { console.log("同步:", data); } } }, progress: function(completedCount, total) { // console.log(total); console.log(Math.floor((completedCount / total) * 100)); }, completeLoad: function() { console.log("已完成所有加載項(xiàng)"); } }); function read() { console.log("異步:", arguments[0]) }Notes
隊(duì)列名稱不能重名,否則后面的隊(duì)列會(huì)覆蓋前面
ES6模式編寫,隊(duì)列之間同步加載,隊(duì)列內(nèi)資源為異步加載
滑屏組件――slide
Install:
git clone https://github.com/jayZOU/slide.gitnpm installgulp
訪問http://localhost:8080/
Examples全選復(fù)制放進(jìn)筆記 /** * 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)前瀏覽頁面 * @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記錄頁面返回后是否回到上次訪問的頁面,默認(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(); //下一頁 // slide.prev(); //上一頁 // slide.playTo(3); //直接跳轉(zhuǎn)第n頁 // console.log(slide.getPage()); //獲取為當(dāng)前頁數(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
新聞熱點(diǎn)
疑難解答
網(wǎng)友關(guān)注