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 相关文章推荐
javascript 动态设置已知select的option的value值的代码
Dec 16 Javascript
js注意img图片的onerror事件的分析
Jan 01 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
Apr 16 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
Jan 22 Javascript
深入理解JavaScript是如何实现继承的
Dec 12 Javascript
javascript定义变量时带var与不带var的区别分析
Jan 12 Javascript
动态加载jQuery的两种方法实例分析
Jul 17 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
Mar 28 Javascript
原生的强大DOM选择器querySelector介绍
Dec 21 Javascript
详解vue的数据binding绑定原理
Apr 12 Javascript
JavaScript数据结构学习之数组、栈与队列
May 02 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
Jul 13 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的ASP防火墙
2006/10/09 PHP
php file_exists 检查文件或目录是否存在的函数
2010/05/10 PHP
PHP扩展开发入门教程
2015/02/26 PHP
PHP+jQuery翻板抽奖功能实现
2015/10/19 PHP
编写PHP脚本清除WordPress头部冗余代码的方法讲解
2016/03/01 PHP
laravel 实现关闭CSRF(全部关闭、部分关闭)
2019/10/21 PHP
Extjs学习笔记之九 数据模型(上)
2010/01/11 Javascript
JS焦点图切换,上下翻转
2011/05/12 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
javascript简单比较日期大小的方法
2016/01/05 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
2016/01/18 Javascript
深入理解JavaScript中的for循环
2017/02/07 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
2017/03/06 Javascript
Es6 Generator函数详细解析
2018/02/24 Javascript
p5.js 毕达哥拉斯树的实现代码
2018/03/23 Javascript
关于TypeScript模块导入的那些事
2018/06/12 Javascript
微信小程序HTTP接口请求封装的实现
2019/02/21 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
[00:34]TI7不朽珍藏III——纯金地穴编织者饰品展示
2017/07/15 DOTA
python基础教程之基本内置数据类型介绍
2014/02/20 Python
Python中类的继承代码实例
2014/10/28 Python
推荐11个实用Python库
2015/01/23 Python
python随机取list中的元素方法
2018/04/08 Python
Django如何配置mysql数据库
2018/05/04 Python
python3读取csv和xlsx文件的实例
2018/06/22 Python
在python中使用xlrd获取合并单元格的方法
2018/12/26 Python
Python3.5面向对象与继承图文实例详解
2019/04/24 Python
Python 给屏幕打印信息加上颜色的实现方法
2019/04/24 Python
pandas 使用均值填充缺失值列的小技巧分享
2019/07/04 Python
美国球鞋寄卖网站:Stadium Goods
2018/05/09 全球购物
日本著名化妆品零售网站:Cosme Land
2019/03/01 全球购物
荷兰DOD药房中文官网:DeOnlineDrogist
2020/12/27 全球购物
咨询公司各岗位职责
2013/12/02 职场文书
城管执法人员个人对照检查材料思想汇报
2014/09/29 职场文书
2014年计生协会工作总结
2014/11/21 职场文书
教师远程培训心得体会
2016/01/09 职场文书