Slip.js(移动端跟随手指滑动组件,零依赖)
Slip.js可用于移动端滑动banner,移动端整屏滑动等效果,个人觉得用于移动端滑动banner比较好,不会和iScroll.js起冲突,因为它不依赖任何其它的js库。
Html:
<!doctype html> ... <script type="text/javascript" src="slip.js"></script> <body> ... <div id="container"> <div class="page page-1"><img src="img/1.png"></div> <div class="page page-2"><img src="img/2.png"></div> <div class="page page-3"><img src="img/3.png"></div> <div class="page page-4"><img src="img/4.png"></div> </div> </body>
Js:
var container = document.getElementById('container');
var pages = document.querySelectorAll('.page');
var slip = Slip(container, 'y').webapp(pages);
解说:
Slip
:暴露到全局的方法,只要你引入slip.js
,就可以得到这个实用牛逼的方法。container
: 被滑动的容器,里面是每个滑动页面。'y'
: 页面滑动的方向,你也可以传入'x'
。webapp
: 设置页面展现为全屏滑动页面的方法。pages
: 页面元素列表。
slip.js有很多强大的功能,这里只是简单的说了一下,详细资料见http://binnng.github.io/slip.js/docs/,源码见于http://binnng.github.io/slip.js/docs/slip.html。
最新文章
- mysql 优化(一)
- ubuntu系统升级记录
- Java基础之网络编程
- Android 图片的缩放与旋转
- Libliner 中的-s 参数选择:primal 和dual
- 转载--JAVA读取文件最佳实践
- spoj 297
- EntityFramework 连接数据库出错
- C++ 类中指向函数的指针 以及 类模板
- Chapter 1 First Sight——33
- 秒懂OAuth2.0
- Spring 环境与profile(三)——利用maven的resources、filter和profile实现不同环境使用不同配置文件
- 有效的括号(Java实现)
- eclipse启动tomcat错误解决
- mongoDB工具类以及测试类【java】
- Session 快速开始 通过session的attribute通信
- C++中的继承(1) 继承方式
- LVM原理与实现
- 理解ES6中的Promise
- Python多线程与多线程中join()的用法
热门文章
- The Parallel Challenge Ballgame[HDU1101]
- BZOJ3084 : [Algorithmic Engagements 2011]The Shortest Period
- ACM Coin Test
- 【BZOJ】1987: Zju2672 Fibonacci Subsequence
- android实现两个页面跳转
- MySQL 服务无法启动。服务没有报告任何错误。
- win7 64位DCOM配置(关于导出excel 配置计算机组件服务)(转)
- javascrit2.0完全参考手册(第二版) 第1章第2节:javascript的历史和使用
- 处理海量数据的高级排序之——希尔排序(C++)
- Linux_磁盘管理