介绍一个性能飞快的移动端滑屏组件iSlider.js
islider功能介绍:/*** iSlider 高性能全屏滑动组件* @class iSlider* @param {object} opts* @param {string} opts.wrap='.wrap' 容器* @param {string} opts.item='.item'滚动单元的元素* @param {string} opts.pla
·
islider功能介绍:
/** * iSlider 高性能全屏滑动组件 * @class iSlider * @param {object} opts * @param {string} opts.wrap='.wrap' 容器 * @param {string} opts.item='.item' 滚动单元的元素 * @param {string} opts.playClass='play' 触发播放动画的class * @param {number} [opts.index=0] 设置初始显示的页码 * @param {array} [opts.noslide=[]] 设置禁止滑动的页面序号(0开始), 禁止后 需要开发者手动绑定页面中的某个按钮事件进行滑动 * @param {number} [opts.speed=400] 动画速度 单位:ms * @param {number} [opts.triggerDist=30] 触发滑动的手指移动最小位移 单位:像素 * @param {boolean} [opts.isVertical=true] 是否是垂直滑动 默认是. 设成false为水平滑动. * @param {boolean} [opts.useACC=true] 是否启用硬件加速 默认启用 * @param {boolean} [opts.fullScr=true] 是否是全屏的 默认是. 如果是局部滑动,请设为false * @param {boolean} [opts.preventMove=false] 是否阻止系统默认的touchmove移动事件, 默认不阻止, 该参数仅在局部滚动时有效, 如果是局部滚动 如果为true 那么在这个区域滑动的时候 将不会滚动页面. 如果是全屏情况 则会阻止 * @param {boolean} [opts.lastLocate=true] 后退后定位到上次浏览的位置 默认true * @param {function} [opts.onslide] 滑动后回调函数 会回传index参数 * @param {array} [opts.loadingImgs] loading需要加载的图片地址列表 * @param {function} [opts.onloading] loading时每加载完成一个图片都会触发这个回调 回调时参数值为 (已加载个数,总数) * @param {number} [opts.loadingOverTime=15] 预加载超时时间 单位:秒 * @desc - 如丝般高性能全屏动画滑屏组件, 主要应用于微信H5宣传页,海报,推广介绍等场景. 基于iSlider,可以快速搭建效果炫丽的H5滑屏页面. - 简洁,易用. 无css依赖. - 专注于页面滑动, 没有冗余代码 , 保证性能. - 组件没有任何依赖. - imgcache 引用地址 : http://imgcache.gtimg.cn/music/h5/lib/js/module/iSlider-1.0.min.js?_bid=363&max_age=2592000 - github: https://github.com/kele527/iSlider * @example //极简用法 new iSlider(); //容器默认是 .wrap 元素默认是 .item 动画播放class默认是 play //普通用法 new iSlider({ wrap:'.wrap', item:'.item', playClass:'play', onslide:function (index) { console.info(index) } }); //带loading进度条用法 new iSlider({ wrap:'.wrap', item:'.item', playClass:'play', onslide:function (index) { console.info(index) }, loadingImgs:[ 'http://imgcache.gtimg.cn/mediastyle/mobile/event/20141118_ten_jason/img/open_cover.jpg?max_age=2592000', 'http://imgcache.gtimg.cn/mediastyle/mobile/event/20141118_ten_jason/img/im_cover.jpg?max_age=2592000', 'http://imgcache.gtimg.cn/mediastyle/mobile/event/20141118_ten_jason/img/bg1.jpg?max_age=2592000', 'http://imgcache.gtimg.cn/mediastyle/mobile/event/20141118_ten_jason/img/bg2.jpg?max_age=2592000' ], onloading:function (loaded,total) { this.$('#loading div').style.width=loaded/total*100+'%'; if (loaded==total) { this.$('#loading').style.display="none" } } }); demo http://kele527.github.io/iSlider/demo1.html * */
综上所述,iSlider集成了预加载、loding、滑屏等多功能组件库
实例参考:http://nextidea.qq.com/act/a20150610ideas/
iSlider.js:http://nextidea.qq.com/act/a20150610ideas/js/iSlider.js
感兴趣的朋友可以看看源码,研究一下这个库,分析优劣,加以改进,打包成自己的库。
更多推荐
已为社区贡献1条内容
所有评论(0)