原文  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. win7 变WIFI热点 & 在线Linux 内核代码

    https://daniel.haxx.se/docs/sshproxy.html netsh wlan set hostednetwork mode=allow ssid=mywifi  key=1 ...

  2. linux OpenOffice

    1.下载所需的安装包  /project/openofficeorg.mirror/4.0.1/binaries/zh-CN/Apache_OpenOffice_4.0.1_Linux_x86-64_ ...

  3. UVA 10106 (13.08.02)

     Product  The Problem The problem is to multiply two integers X, Y. (0<=X,Y<10250) The Input T ...

  4. 415. Add Strings

    没什么限定的话,先翻转,在一位一位加,记得进位就行了.. public class Solution { public String addStrings(String num1, String nu ...

  5. CMDLINE的解析

    在linux的config文件中有一个特殊的宏定义CMDLINE,以前也一直在使用这个宏的参数,但是真正这个宏的解析和使用却不怎么明确.这次有机会多对它有些了解,不妨把这个浅显的认识说出来,记下来. ...

  6. Centos6.x 安装vnc

    一.安装gnome桌面环境 如果系统已经安装了gnome桌面环境,此步省略. # 安装fontforge,避免字体出现方框乱码 yum install fontforge -y # 安装gnome桌面 ...

  7. TortoiseSVN搭建本地版本库及简单操作使用

    TortoiseSVN是windows上一款著名的版本控制软件,对于我们管理自己的代码,特别是对一个团队来说,非常重要. 本文探讨的是如何搭建本地的版本库. (1)安装TortoiseSVN之后需要创 ...

  8. 【转】HTML5的语音输入 渐进使用HTML5语言识别, so easy!

    转自: 本文地址:http://www.zhangxinxu.com/wordpress/?p=2408 一.本不想写此文 HTML5语音识别(现在一般用在搜索上),目前相关介绍还是挺多的.为何呢?因 ...

  9. hdu 2546 饭卡（DP）

    很久以前做过这道题,晚上睡不着,看见nyist加了一个DP的比赛,就进来打个酱油. 这道题的点睛之笔是将最大值记录下来,然后将其值改为0.之后就是普通的背包了. #include<stdio.h ...

  10. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（42）-工作流设计01

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(42)-工作流设计01 工作流在实际应用中还是比较广泛,网络中存在很多工作流的图形化插件,可以做到拉拽的工 ...