Swipe JS滑动插件
2015-07-30 15:31
639 查看
Swipe JS 是一个轻量级的移动滑动组件,支持 1:1 的触摸移动,阻力以及防滑性能都不错,可以让移动web应用展现更多的内容,能解决我们对于移动Web对滑动的需求。
官网:http://www.swipejs.com
github:https://github.com/bradbirdsall/Swipe
要实现Swipe的滑动和手势非常简单,仅需要遵循一个简单的规则。下面是一个例子:
里面包裹的三个DIV即是滑动的模块了,在滑块结束后面或页面底部添加事件代码:
当然添加了事件后我们还需要添加一些基础的样式,以保证滑块能正常工作:
到这里整个滑动效果就制作完成了,赶紧用手机进行测试下吧!
Swipe2.0还提供了更多的参数设置:
startSlide Integer (default:0) - index position Swipe should start
at(滑动的索引值,即从*值开始滑动,默认值为0)
speed Integer (default:300) - speed of prev and next transitions
in milliseconds.(滑动的速度,默认值300毫秒)
auto Integer - begin with auto slideshow (time in milliseconds between slides)(自动滑动,单位为毫秒)
continuous Boolean (default:true) - create an infinite feel with
no endpoints(是否循环滑动,默认值为true)
disableScroll Boolean (default:false) - stop any touches on this
container from scrolling the page(停止任何触及此容器上滚动页面,默认值flase)
stopPropagation Boolean (default:false) - stop event propagation(停止事件传播,默认值flase)
callback Function - runs at slide change.(回调函数)
transitionEnd Function - runs at the end slide transition.(滑动过渡时调用的函数)
举个带参数设置的栗子:
<script type="text/javascript">
window.mySwipe = new Swipe(document.getElementById('slider'), {
startSlide: 2,
speed: 400,
auto: 3000,
continuous: true,
disableScroll: false,
stopPropagation: false,
callback: function(index, elem) {},
transitionEnd: function(index, elem) {}
});
</script>
Swipe2.0提供的API
与1.0相比较,2.0做出了很多改进,有更多的API设定,相比各种WebApp开发框架,Swipe也有自己的优缺点,
优点:
滑动与防滑性能非常不错,用户体验较好
Html结构简单,自定义较灵活
缺点:
切换后盒子的高度取决于切换内容最大高度,如果某个盒子无内容,那么会出现一个空白区域
当前选中状态在滑动结束后才激活
混合开发时js代码较为繁琐
官网:http://www.swipejs.com
github:https://github.com/bradbirdsall/Swipe
要实现Swipe的滑动和手势非常简单,仅需要遵循一个简单的规则。下面是一个例子:
<div id='slider' class='swipe'> <div class='swipe-wrap'> <div>1</div> <div>2</div> <div>3</div> </div> </div>
里面包裹的三个DIV即是滑动的模块了,在滑块结束后面或页面底部添加事件代码:
window.mySwipe = Swipe(document.getElementById('slider'));
当然添加了事件后我们还需要添加一些基础的样式,以保证滑块能正常工作:
.swipe { overflow: hidden; visibility: hidden; position: relative; } .swipe-wrap { overflow: hidden; position: relative; } .swipe-wrap > div { float:left; width:100%; position: relative; }
到这里整个滑动效果就制作完成了,赶紧用手机进行测试下吧!
Swipe2.0还提供了更多的参数设置:
startSlide Integer (default:0) - index position Swipe should start
at(滑动的索引值,即从*值开始滑动,默认值为0)
speed Integer (default:300) - speed of prev and next transitions
in milliseconds.(滑动的速度,默认值300毫秒)
auto Integer - begin with auto slideshow (time in milliseconds between slides)(自动滑动,单位为毫秒)
continuous Boolean (default:true) - create an infinite feel with
no endpoints(是否循环滑动,默认值为true)
disableScroll Boolean (default:false) - stop any touches on this
container from scrolling the page(停止任何触及此容器上滚动页面,默认值flase)
stopPropagation Boolean (default:false) - stop event propagation(停止事件传播,默认值flase)
callback Function - runs at slide change.(回调函数)
transitionEnd Function - runs at the end slide transition.(滑动过渡时调用的函数)
举个带参数设置的栗子:
<script type="text/javascript">
window.mySwipe = new Swipe(document.getElementById('slider'), {
startSlide: 2,
speed: 400,
auto: 3000,
continuous: true,
disableScroll: false,
stopPropagation: false,
callback: function(index, elem) {},
transitionEnd: function(index, elem) {}
});
</script>
Swipe2.0提供的API
prev()slide to prev(上一页)
next()slide to next(下一页)
getPos()returns current slide index position(获取当前索引位置)
getNumSlides()returns the total amount of slides(获取所有滑块总数)
slide(index, duration)slide to set index position (duration: speed of transition in milliseconds)(指数,持续时间)滑动设置索引位置(持续时间:转型速度以毫秒为单位)
与1.0相比较,2.0做出了很多改进,有更多的API设定,相比各种WebApp开发框架,Swipe也有自己的优缺点,
优点:
滑动与防滑性能非常不错,用户体验较好
Html结构简单,自定义较灵活
缺点:
切换后盒子的高度取决于切换内容最大高度,如果某个盒子无内容,那么会出现一个空白区域
当前选中状态在滑动结束后才激活
混合开发时js代码较为繁琐
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- java-WEB中的监听器Lisener
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- GUI - Web前端开发框架
- Extjs4.0 最新最全视频教程
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- MyEclipse Web Project转Eclipse Dynamic Web Project
- axis备忘
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 异步流程控制:7 行代码学会 co 模块
- JavaScript拆分字符串时产生空字符的原因
- IE8开发人员工具教程(二)
- Erlang实现的一个Web服务器代码实例
- 在flex中执行一个javascript方法的简单方式
- 防止网页脚本病毒执行的方法-from web
- Flex结合JavaScript读取本地路径的方法