javascript Slip.js实现整屏滑动的手机网页


Posted in Javascript onNovember 25, 2015

有了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();
});

看,是不是很简单,是不是还没来得及抱怨这个需求,就已经完成它了,是不是有种前所未有的快感。

以上就是本文的全部内容,希望大家喜欢,这篇文章只是一个开始,之后会有更加全面精彩的文章等着大家,希望大家不要错过。

Javascript 相关文章推荐
jquery手风琴特效插件
Feb 04 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
Mar 01 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
Aug 31 Javascript
jQuery给元素添加样式的方法详解
Dec 30 Javascript
原生javascript实现自动更新的时间日期
Feb 12 Javascript
基于JavaScript实现文字超出部分隐藏
Feb 29 Javascript
javascript中call apply 与 bind方法详解
Mar 10 Javascript
浅谈Angular2 模块懒加载的方法
Oct 04 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
Aug 22 Javascript
微信小程序实现单列下拉菜单效果
Apr 25 Javascript
vue双向绑定数据限制长度的方法
Nov 04 Javascript
Vue环境搭建+VSCode+Win10的详细教程
Aug 19 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
Nov 25 #Javascript
javascript数据结构之双链表插入排序实例详解
Nov 25 #Javascript
js获取图片宽高的方法
Nov 25 #Javascript
javascript数据结构之二叉搜索树实现方法
Nov 25 #Javascript
javascript常用经典算法实例详解
Nov 25 #Javascript
javascript实现很浪漫的气泡冒出特效
Sep 05 #Javascript
jQuery插件jquery-barcode实现条码打印的方法
Nov 25 #Javascript
You might like
PHP 数组排序方法总结 推荐收藏
2010/06/30 PHP
完美的2个php检测字符串是否是utf-8编码函数分享
2014/07/28 PHP
点图片上一页下一页翻页效果
2008/07/09 Javascript
jquery 经典动画菜单效果代码
2010/01/26 Javascript
js函数获取html中className所在的内容并去除标签
2013/09/08 Javascript
javascript在myeclipse中报错的解决方法
2013/10/29 Javascript
jquery获取css中的选择器(实例讲解)
2013/12/02 Javascript
JS实现进入页面时渐变背景色的方法
2015/02/25 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
2015/12/30 Javascript
Active控件问题小结(附解决办法)
2016/06/09 Javascript
jQuery表单验证插件解析(推荐)
2016/07/21 Javascript
js编写的treeview使用方法
2016/11/11 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
JS实现图片点击后出现模态框效果
2017/05/03 Javascript
JS点击缩略图整屏居中放大图片效果
2017/07/04 Javascript
ReactNative 之FlatList使用及踩坑封装总结
2017/11/29 Javascript
Vue 使用formData方式向后台发送数据的实现
2019/04/14 Javascript
angular异步验证防抖踩坑实录
2019/12/01 Javascript
封装 axios+promise通用请求函数操作
2020/08/11 Javascript
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
使用Python编写vim插件的简单示例
2015/04/17 Python
用python的turtle模块实现给女票画个小心心
2019/11/23 Python
python连接打印机实现打印文档、图片、pdf文件等功能
2020/02/07 Python
屏蔽Django admin界面添加按钮的操作
2020/03/11 Python
Python DES加密实现原理及实例解析
2020/07/17 Python
如何用Matplotlib 画三维图的示例代码
2020/07/28 Python
教你如何用python操作摄像头以及对视频流的处理
2020/10/12 Python
贷款委托书范本
2014/04/08 职场文书
法学专业求职信
2014/07/15 职场文书
小学生十佳少年事迹材料
2014/08/20 职场文书
医院党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
长江三峡导游词
2015/01/31 职场文书
文明礼貌主题班会
2015/08/14 职场文书
通知怎么写?
2019/04/17 职场文书
解决Python字典查找报Keyerror的问题
2021/05/26 Python
JavaScript实现简单的音乐播放器
2022/08/14 Javascript