javascript Slip.js实现整屏滑动的手机网页
更新时间：2015年11月25日 15:50:23 作者：彼岸花在开
Slip.js能做什么？Slip.js可以让你的手机网站像原生手机软件一样惯性滚动，手触图片轮换等等，对Slip.js感兴趣的小伙伴们可以参考一下
有了Slip.js，你只管写HTML，CSS，如果逻辑简单，一行JS代码就可以搞定，大大提升了开发的效率。不吹牛，上面的demo，不到半小时我就写好了。
具体怎么做呢？比如有个需求是：
我们有4个页面，每个页面有一张图片，每次手指滑动都切换一整屏。
首先看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(document.getElementById('container'), 'y').webapp();
可以发现，上面的一行代码并没有定义pages:
当webapp方法不传递参数的时候，Slip会获取container的直接子元素（儿子元素）作为pages。
至此，一个全屏滑动网页就完成了，难以想象的简单快速。我用半小时，你10分钟应该就可以。
当然：Slip.js还有很多更强大的功能，比如你可以自己定义页面滑动时要做什么，PM看你完成的这么快，就给你加了很有意思的需求：
当页面滑动到最后一页的时候，刷新一下。。。
你只需要加几行代码就可以搞定：
Slip(document.getElementById('container'), 'y').webapp().end(function() {
if (this.page === 3) location.reload();
});
看，是不是很简单，是不是还没来得及抱怨这个需求，就已经完成它了，是不是有种前所未有的快感。
以上就是本文的全部内容，希望大家喜欢，这篇文章只是一个开始，之后会有更加全面精彩的文章等着大家，希望大家不要错过。
相关文章
最近有美工朋友找我们要兼容性比较好的对联广告代码，我们给他一个他竟然不能运行，经过排查，这是因为现在的广告也用了一样代码，函数命名重复。2011-07-07
这篇文章主要介绍了javascript+css3 实现动态按钮菜单特效的相关资料,需要的朋友可以参考下2016-02-02
javascript实现 在光标处插入指定内容...2007-05-05
广告式的漂浮窗口，想必大家并不陌生吧，下面为大家简单介绍下具体的实现，有需要的朋友可以参考下2013-08-08
类型转换是大家常犯的错误，因为JavaScript是动态类型语言，你不能指定变量的类型。2010-12-12
今天小编就为大家分享一篇layui--select使用以及下拉框实现键盘选择的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
下面小编就为大家带来一篇js学习心得_一个简单的动画库封装tween.js。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要为大家详细介绍了JavaScript实现登录窗体，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
这篇文章主要介绍了JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码,需要的朋友可以参考下2018-04-04
这篇文章主要介绍了JS实现仿腾讯微博无刷新删除微博效果代码,涉及JavaScript实现Ajax无刷新删除的相关实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
最新评论