微构网络

推荐一款移动WEB页面内容触摸滑动类库-swipe.js

2014-10-27 10:00 栏目:技术教程 查看(12,456)

最近在做我们自己长沙网站建设官网的手机版,其中在微门户部分要用到一个幻灯片的地方,其实用js或者js的框架之一jq写一个pc端的这种效果比较容易的,但在移动端写出来总是不尽人意。在开发过程中也看到了很多其他大型网站用的该部分的js,发现太过于累赘了。然后就想到了开源类库了,咱们热爱开源,所以很多时候都来折腾点开源的东西。不像某些长沙网络公司之间复制一段js贴上去就完事了。后来我们发现了一款名为swipe.js的轻量级开源类库,大小只有8KB。

虽然是一个极其轻量级的类库,但它的功能却不简单,它可以用来展示web页面上的任何内容,支持精确的触摸移动操作,而且还可以设置自动播放、等比例缩放等等实用性的功能。

几个关于swipe.js的使用参数

startSlide: 4, //起始图片切换的索引位置
auto: 3000, //设置自动切换时间,单位毫秒
continuous: true, //无限循环的图片切换效果
disableScroll: true, //阻止由于触摸而滚动屏幕
stopPropagation: false, //停止滑动事件
callback: function(index, element) {}, //回调函数,切换时触发
transitionEnd: function(index, element) {} //回调函数,切换结束调用该函数。

除此之外还有我们经常需要调用的API

prev():上一页
next():下一页
getPos():获取当前页的索引
getNumSlides():获取所有项的个数
slide(index, duration):滑动方法

更多的细节大家可以去它的官网或者github去参考,也可以到时候参考我们的手机版官网哦。

swipe.js官网地址:http://swipejs.com/

swipe.js在github的项目主页:https://github.com/thebird/Swipe

转载请注明出处:推荐一款移动WEB页面内容触摸滑动类库-swipe.js - 微构网络
分享:

您可能遇到的问题?

搜索微构网络的干货:

值班:15574303608 业务:在线咨询 技术:在线咨询

电话:0731-83862683 售后:在线咨询 邮箱:server@csweigou.com

地址:长沙市五一西路锦绣中环1116(五一广场平和堂对面)