原文  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. SRM 409(1-250pt, 1-500pt)

    DIV1 250pt 题意:称string s是vector<string> words的ordered superstring,如果它满足:存在一个数列{x0, x1, x2...xm} ...

  2. .Net互操作2

    1.C++创建Dll,Win32控制台,空项目,添加头文件NativeLib.h,NativeLib.cpp extern "C" __declspec(dllexport) vo ...

  3. Ehcache简单说明及使用

    EhCache 是一个纯Java的进程内缓存框架,具有快速.精干等特点,是Hibernate中默认的CacheProvider. Ehcache是一种广泛使用的开源Java分布式缓存.主要面向通用缓存 ...

  4. 异步加载图片到GridView上，防止OOM

    图片资源: private int fore[]; private int back[]; fore = new int[]{R.drawable.a0, R.drawable.a1, R.drawa ...

  5. c#委托和事件(上)

    C# 中的委托和事件 引言 委托 和 事件在 .Net Framework中的应用非常广泛,然而,较好地理解委托和事件对很多接触C#时间不长的人来说并不容易.它们就像是一道槛儿,过了这个槛的人,觉得真 ...

  6. C# 获取网页数据、获取本机IP 分类： C# 2014-12-16 14:59 308人阅读 评论(0) 收藏

    说明: (1) http://www.3322.org/dyndns/getip 这个网址可以获取本机IP,读取的内容就是本机IP (2)方法经测试,可以实现. (3)参考:http://www.cn ...

  7. 【Android - 框架】之Glide的使用

    一.Glide简介: Glide是Google官方推荐的一个图片加载和缓存的开源库,它不仅能实现平滑的图片列表滚动效果,还支持远程图片的获取.大小调整和展示,并且可以加载GIF图片.Glide相比与U ...

  8. 关于封装unity3d的dll时候的进一步总结

    在进行新项目的开发或者接手.后期维护其他一些项目时,经常性的,我们会遇到以下情况: 1.使用新的插件替换已有的bug比较多或者不在维护的插件: 2.因策划需求或美术资源的变更,而不得不更换游戏中的游戏 ...

  9. oracle AWR深入研究分析，如何使用

    AWR的前身是statspack,当然现在还在,只不过大家都在使用AWR,因为它方便,简单,直观,形象. AWR是oracle内置工具,安装oracle时已经自动安装完毕,无需额外安装了. SELEC ...

  10. admob广告开始个人资料网址

    最近植入广告,数据收集,简单易学. ios http://www.rover12421.com/2013/05/08/ios-add-admob-ads-test-xcode-project-test ...