javascript 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方法不传递html" target="_blank">参数的时候，Slip会获取container的直接子元素（儿子元素）作为pages。
至此，一个全屏滑动网页就完成了，难以想象的简单快速。我用半小时，你10分钟应该就可以。
当然：Slip.js还有很多更强大的功能，比如你可以自己定义页面滑动时要做什么，PM看你完成的这么快，就给你加了很有意思的需求：
当页面滑动到最后一页的时候，刷新一下。。。
你只需要加几行代码就可以搞定：
Slip(document.getElementById('container'), 'y').webapp().end(function() {
if (this.page === 3) location.reload();
});
看，是不是很简单，是不是还没来得及抱怨这个需求，就已经完成它了，是不是有种前所未有的快感。
以上就是本文的全部内容，希望大家喜欢，这篇文章只是一个开始，之后会有更加全面精彩的文章等着大家，希望大家不要错过。
-
本文向大家介绍JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)，包括了JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)的使用技巧和注意事项，需要的朋友参考一下 1、本文使用js+jQuery实现轮播图，需要引用jquery包，另种实现分别是animate实现自适应的轮播，以及transform平滑轮播（在注释代码中）。 2、代码中的图片大家自己更换就可以了，样式和逻辑均写在js里。 3
-
本文向大家介绍android viewpager实现竖屏滑动效果，包括了android viewpager实现竖屏滑动效果的使用技巧和注意事项，需要的朋友参考一下 Viewpager 横向滑动效果系统就自带了很多种，比如这个 效果 那如果做成竖屏的这种效果呢 。我百度过很多，效果都不是很好，有的代码特别多而且存在很多问题。我结合了以前别人的代码现在来教大家个简单的实现过程。 首先自定义Viewpa
-
本文向大家介绍android视频截屏&手机录屏实现代码，包括了android视频截屏&手机录屏实现代码的使用技巧和注意事项，需要的朋友参考一下 本文介绍了android视频截屏&手机录屏实现代码，分享给大家，希望对大家有帮助 问题 在android中有时候我们需要对屏幕进行截屏操作，单一的截屏操作好解决可以通过activity的顶层view DecorView获取一个bitmap，得到就是当前ac
-
本文向大家介绍在vue中实现禁止屏幕滚动,禁止屏幕滑动，包括了在vue中实现禁止屏幕滚动,禁止屏幕滑动的使用技巧和注意事项，需要的朋友参考一下 今天写了一个Vue弹层组件，用来全屏查看图片的，大概是下面这么一个效果： 其中背景是透明色的，但是弹出这个组件时手指滑动、鼠标滚轮滑动，底部页面是会动。 作为自己开发的一个常用的组件，这种bug当然是要解决的。 于是学艺不精的我在网上找了蛮久的，看了不少博
-
本文向大家介绍Android实现手势滑动识别功能，包括了Android实现手势滑动识别功能的使用技巧和注意事项，需要的朋友参考一下 对于Android中的手势识别可以从以下三个Listener入手——OnTouchListener、OnGestureListener、OnDoubleTapListener。这三个监听器分别是触摸监听、手势滑动监听和屏幕双击操作监听。很多的时候我们需要这些手势识别的
-
本文向大家介绍Jquery网页内滑动缓冲导航的实现代码，包括了Jquery网页内滑动缓冲导航的实现代码的使用技巧和注意事项，需要的朋友参考一下 如果网页过长，需要页内导航的时候，我们一般是在目标出设置ID，比如<div id="footer"></div>，然后在当前页面某个链接地址设置如：<a href="#footer">点击指向到底部</a>，这样点击该链接后就会马上转到网页底部，默认是直接