原文  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. 使用python实现最优化问题

    最优化问题 1.无约束的最优化问题 所谓的无约束优化问题指的是一个优化问题的寻优可行集合是目标函数自变量的定义域,即没有外部的限制条件.例如,求解优化问题 [ \begin{array}{rl} \t ...

  2. A Dicey Problem 骰子难题(Uva 810)

    题目描述:https://uva.onlinejudge.org/external/8/810.pdf 把一个骰子放在一个M x N的地图上,让他按照规定滚动,求滚回原点的最短路径. 思路:  记忆化 ...

  3. 【转】Gabor 入门

    Computer Vision Tutorials Search Primary Menu Skip to content Tutorials Search for:   Gabor Filters ...

  4. 几个 PHP 的“魔术常量”

    PHP 向它运行的任何脚本提供了大量的预定义常量.不过很多常量都是由不同的扩展库定义的,只有在加载了这些扩展库时才会出现,或者动态加载后,或者在编译时已经包括进去了. 有八个魔术常量它们的值随着它们在 ...

  5. windows 下删除.svn文件

    Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\DeleteSVN] @= ...

  6. MFC——error LNK2005: "protected: static struct AFX_MSGMAP

    好久没弄VC程序了,今天弄了下,还会用公司给的窗口重绘作为基类来实现,竟然报了这个错误. 找了一下是这里: 有个窗口重绘类是基类: class CBaseDlg : public CDialog 新建 ...

  7. shell获取 linux 系统的位数

    getconf LONG_BIT 直接返回  32  或者 64

  8. [RxJS] Transformation operator: bufferToggle, bufferWhen

    bufferToggle(open: Observable, () => close: Observalbe : Observalbe<T[]>) bufferToggle take ...

  9. [RxJS] What RxJS operators are

    We have covered the basics of what is Observable.create, and other creation functions. Now lets fina ...

  10. Qt 学习之路：二进制文件读写

    在上一章中,我们介绍了有关QFile和QFileInfo两个类的使用.我们提到,QIODevice提供了read().readLine()等基本的操作.同时,Qt 还提供了更高一级的操作:用于二进制的 ...