資源預加載組件——preload
Install:
git clone https://github.com/jayZOU/preload.git npm install npm 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 資源預加載組件 * @author jayzou * @time 2016-1-12 * @version 1.0.6 * @class Preload * @param {object} sources 必填 加載隊列容器,支持隊列加載以及加載一個隊列後傳入回調 * @param {boolean} isDebug 選填 是否開啟debug選項,用於移動端調試,默認false * @param {object} connector 選填 後台數據接口,可選擇同步或異步 * @param int loadingOverTime 選填 預加載超時時間,默認15, 單位:秒 * @param {object} loadingOverTimeCB 選填 預加載超時回調 * @param {object} wrap 選填 進度條容器,返回記載進度信息 * @param {object} completeLoad 選填 完成所有加載項執行回調,包括同、異步獲取數據 **/ var preload = new Preload({ isDebug: true, sources: { imgs: { source: [ "../public/image/b2.jpg", "../public/image/b1.jpg" ], callback: function() { console.log("隊列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("隊列3完成"); } } }, loadingOverTime: 3, loadingOverTimeCB: function(res) { console.log("資源加載超時:", 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("已完成所有加載項"); } }); function read() { console.log("異步:", arguments[0]) }
Notes
隊列名稱不能重名,否則後面的隊列會覆蓋前面
ES6模式編寫,隊列之間同步加載,隊列內資源為異步加載
滑屏組件——slide
Install:
git 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 必填 傳入滑動容器ID * @param String currentClass 選填 滑動時切換動畫class,默認current * @param boolean startLocalstorage 選填 記錄當前浏覽頁面 * @param {Object} onChange 選填 切換完成回調 * @param {Object} onDownChange 選填 下滑完成時回調 * @param {Object} onUpChange 選填 上滑完成時回調 * @param {Object} defaultClass 選填 滑動過程動畫效果 **/ var slide = new Slide({ wrap: 'wrap', //必填,傳入滑動容器ID currentClass: 'current', //選填,滑動時切換動畫class startLocalstorage: false, //選填,是否開啟localstorage記錄頁面返回後是否回到上次訪問的頁面,默認false onChange: function(){ //選填,每屏切換完成時的回調 console.log("onchange"); }, onDownChange: function(){ //選填,下滑完成時回調 console.log("onDownChange"); }, onUpChange: function(){ //選填,上滑完成時回調 console.log("onUpChange"); }, defaultClass: { //選填,滑動過程動畫效果 'webkitTransition': '-webkit-transform 0.5s ease', //需要加前綴 'transform': 'translate(0px, 0px)' //不需要加前綴 }, }); // slide.next(); //下一頁 // slide.prev(); //上一頁 // slide.playTo(3); //直接跳轉第n頁 // console.log(slide.getPage()); //獲取為當前頁數 // slide.lockPage(); //鎖住屏幕,禁止滑動 // slide.unLockPage(); //解鎖屏幕,允許滑動 //輔助類 // slide.toggleClass(targ, className); //置換class // slide.addClass(targ, className); //添加class // slide.removeClass(targ, className); //刪除class // slide.css(o, style); //添加style樣式
Notes
滑動容器只能傳入ID值,不允許傳入class