原文  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. [git] git 分支( branch ) 的基本使用

    分支( branches ) 是指在开发主线中分离出来,做进一步开发而不影响到原来主线. Git 存储的不是一系列的更改集( changeset ),而是一系列快照.当你执行一次 commit 时, ...

  2. 常用的MySQL图形化管理软件

    本博文的主要内容有 .SQLyog软件的安装.下载和使用 .Navicat for MySQL软件的安装.下载和使用 1.SQLyog软件的安装.下载和使用 2.Navicat for MySQL软件 ...

  3. linux —— 编译linux内核

    目录:     0.测试环境 1.获得最新内核源代码  2.编译源代码 3.运行新的内核 0.测试环境: 我的系统 : ubuntu 16.04 LTS (内核版本:4.4.0-36-generic ...

  4. 通过mybatis读取数据库数据并提供rest接口访问

    1 mysql 创建数据库脚本 -- phpMyAdmin SQL Dump -- version 4.2.11 -- http://www.phpmyadmin.net -- -- Host: lo ...

  5. [转] 使用Git进行小项目代码管理

    http://www.uml.org.cn/pzgl/201206155.asp 之前在公司使用过SVN(无甚感觉)和ClearCase(把人恶心死的东西)两种版本控制工具,都不满意.后来想自己写点东 ...

  6. Java 自带MD5加密 Demo

    package demo; import java.security.MessageDigest; import java.security.NoSuchAlgorithmException; pub ...

  7. Android（java）学习笔记213：开源框架post和get方式提交数据（qq登录案例）

    1.前面提到Http的get/post方式  . HttpClient方式,实际工作的时候不常用到,因为这些方式编写代码是很麻烦的 2.Android应用会经常使用http协议进行传输,网上会有很完善 ...

  8. 10.29 morning

    WPS转word太丑了 凑合看喽 第二题 [题目描述] 给你两个日期,问这两个日期差了多少毫秒. [输入格式] 两行,每行一个日期,日期格式保证为“YYYY-MM-DD hh:mm:ss ”这种形式. ...

  9. 重载，重写和super

    1.重载的概念:----->在同一个类中,允许存在同名函数,但它们的参数个数或者参数类型不同即可.public static void main(String[] args){System.ou ...

  10. Adb connect监听指定的主机和端口/Adb监听Visual Studio Emulator for Android模拟器

    语法: adb connect <host>[:<port>] 使用实例: adb connect //如果连接成功则返回 connected to 说明 在使用Visual ...