原文  http://segmentfault.com/blog/laopopo/1190000000708417

现在滑屏网页越来越多，比如我在搜狐视频就做了好几个，举个例子，可以用手机扫描以下的二维码访问：

之前写这样的页面可能还要纠结选择什么库，然后再写一堆 touch 的事件，再加上写样式写HTML，可能几个小时就这么过去，才算完成。

现在不一样了。

有了 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>

再看CSS:

/* 按自己需要来定义吧，不写也没关系 */

最后看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();

});

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

注意：页数是从0开始的 ，所以上面的最后一页是3，而不是4。

如果你看到了这里还没离开，我想你对 Slip.js 应该还是至少有点兴趣的，那么你可以去 Github 关注它。

如果想迫切试用 Slip.js ，可以直接查看 文档 。

如果想要看看 Slip.js 如何实现，可以查看 源码 。

项目地址：http://binnng.github.io/slip.js/

gitub下载地址:https://github.com/binnng/slip.js/tarball/master

使用Slip.js快速创建整屏滑动的手机网页的更多相关文章

  1. Bounce.js – 快速创建漂亮的 CSS3 动画效果

    Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...

  2. Node.js快速创建一个Express应用的几个步骤

    Node.js 的 Express 框架学习 转载和参考地址: https://developer.mozilla.org/zh-CN/docs/Learn/Server-side/Express_N ...

  3. Sale.js——快速创建促销样式

    小菜编写的又一款jQuery小插件,有兴趣的朋友可以试试~ 简介: 对于一个用于产品展示.销售的网站而言,很可能需要一种促销的特效. 一般而言,我们会在商品图片前加一个促销栏,写上一些促销标语.原价. ...

  4. Node.js快速创建一个访问html文件的服务器

    var http = require('http'), // 引入需要的模块 fs = require('fs'), //引入文件读取模块 cp = require('child_process'), ...

  5. Slip.js（移动端跟随手指滑动组件，零依赖）

    Slip.js可用于移动端滑动banner,移动端整屏滑动等效果,个人觉得用于移动端滑动banner比较好,不会和iScroll.js起冲突,因为它不依赖任何其它的js库. Html: <!do ...

  6. Slip.js – 在触摸屏上实现列表的滑动排序功能

    Slip.js 是一个很小的 JavaScript 库,用于实现对触摸屏的互动 Swipe 和对元素重新排序列表(Reordering).Slip.js 没有任何的依赖,你可以通过自定义 DOM 事件 ...

  7. 通过js实现整屏滑动+全屏翻页+动画展示+线性图

    技术:html+css+jquery+jquery-ui.js+jquery.fullPage.js   概述 本demo主要通过html+css+js实现整屏滑动,全屏翻页并带动画的功能效果,借助于 ...

  8. 快速创建显示数字数据的动画——CountUp.js

    由于项目需求,需要写一个数字增/减量的动画特效,最后找到了CountUp.js CountUp.js是一个无依赖,轻量级的JavaScript“类”,可用于快速创建以更有趣的方式显示数字数据的动画. ...

  9. JS快速入门（二）

    目录 JS快速入门(二) 结构图 BOM window对象 open() window子对象 location对象 history对象(了解) navigator 对象 screen对象 BOM 定时 ...

随机推荐

  1. OpenStack网络的前世今生

    声明: 本文转自OpenStack中国社区,原文链接:http://www.openstack.cn/p353.html,作者Joshua,转载请注明. 在OpenStack世界中,网络组件最初叫no ...

  2. C++Primer第5版学习笔记（一）

    C++Primer第5版学习笔记(一) 第一.二章的重难点内容        这个笔记本主要记录了我在学习C++Primer(第5版,中文版)的过程中遇到的重难点及其分析.因为第一.二章都比较简单,因 ...

  3. CF 121E Lucky Array 【树状数组】

    这个题目的数据感觉不能更水了.从复杂度上计算,肯定有极限数据可以卡掉暴力方法的么. 总之,暴力的做法就是树状数组了,对于区间更新,就挨个更新就是了.当然,判断是否是Lucky Number的话,可以用 ...

  4. DateADD日期Sql

    --1.  当前系统日期.时间 select getdate() --2015-01-06 09:27:27.277   --2.时间操作 dateadd  在向指定日期加上一段时间的基础上,返回新的 ...

  5. 洛谷 P1004 方格取数

    题目描述 设有N*N的方格图(N<=9),我们将其中的某些方格中填入正整数,而其他的方格中则放 人数字0.如下图所示(见样例): A 0 0 0 0 0 0 0 0 0 0 13 0 0 6 0 ...

  6. centos 网站目录权限参考

    Linux下Apache网站目录读写权限的设置 网站目录文件权限的设置对网站的安全至关重要,下面简单介绍网站目录文件权限的基本设定. 我们假设http服务器运行的用户和用户组是www,网站用户为cen ...

  7. Java——（十）网络编程

    ------Java培训.Android培训.iOS培训..Net培训.期待与您交流! ------- 一.Java的基本网络支持 Java为网络支持提供了java.net包,该包下的URL和URLC ...

  8. java读取redis的timeout异常

    http://blog.csdn.net/shuaiokshuai/article/details/23266091 FIFO Fist-in Fisrt-out 先进先出

  9. 第四篇：python基础之dict、set及字符

    python基础之dict.set及字符   python基础之dict.set及字符串处理 本节内容 字典介绍及内置方法 集合介绍 字符串处理 1.字典介绍及内置方法 字典是python中唯一的映射 ...

  10. 10.25 noip模拟试题

    今天题目略水2333 依旧不粘题目了23333 T1 /*数学题 给定n个斜率 求有多少个三元组 保证两两斜率不同 ans=C(n,3)-ΣC(len[i],2)*(n-len[i])-ΣC(len[ ...