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

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>

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.js有很多强大的功能，这里只是简单的说了一下，详细资料见http://binnng.github.io/slip.js/docs/，源码见于http://binnng.github.io/slip.js/docs/slip.html。



Slip.js（移动端跟随手指滑动组件，零依赖）的更多相关文章

  1. js移动端滑块验证解锁组件

    本文修改自PC端的js滑块验证组件,PC端使用的是onmousedown,onmouseup,nomousemove.原文找不到了,也是博客园文章,在此感谢广大网友的生产力吧. 说下对插件和组件的理解 ...

  2. js移动端向左滑动出现删除按钮

    最近在做移动端项目时,需要实现一个列表页面的每一项item向左滑动时出现相应的删除按钮,本来想着直接使用zepto的touch.js插件,因为之前实现相同的功能时用过这个插件,当时还挺好用的,直接使用 ...

  3. onTouchEvent中，跟随手指滑动的view出现抖动

    在这次实践中,它抖动得不正常,太不正常,太抖. 其实是我代码上出现了问题,记录一下. 我是怎么设置滑动的呢? 通过改变view的margin. 然而我在onTouchEvent中怎么控制它滑动的大小呢 ...

  4. 第二章实例：动态生成View控件例子---小球跟随手指滑动

    package mydefault.packge; import android.app.Activity; import android.content.Context; import androi ...

  5. vue 移动端轻量日期组件不依赖第三方库

    Vue版移动端日期选择组件 1.优点:不需要依赖其他第三方库,灵活可配置: 不需要依赖第三方组件的vue日期移动端组件  小轮子 轻量可复用:  https://github.com/BeckReed ...

  6. Vue.js 桌面端自定义滚动条组件|vue美化滚动条VScroll

    基于vue.js开发的小巧PC端自定义滚动条组件VScroll. 前段时间有给大家分享一个vue桌面端弹框组件,今天再分享最近开发的一个vue pc端自定义滚动条组件. vscroll 一款基于vue ...

  7. 移动端 uni-app 滑动事件 精确判断手指滑动方向

    移动端根据手指滑动操作判断滑动方向 设计思路: 1.根据移动端touchstart和touchend方法获取手指触摸屏幕的开始坐标和结束坐标 2.根据两个坐标计算与水平方向的夹角 3.根据夹角判断当前 ...

  8. 移动端js手指滑动事件初体验

    今天在公司遇到做一个移动端手指滑动的效果,刚開始用了swiper.js插件发现效果不好(文字存在模糊效果).后来查了一些资料,自己手写了一个使用原生js写的滑动效果. 以下直接上代码: <!do ...

  9. JS案例之5——移动端触屏滑动

    移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...

随机推荐

  1. Codeforces Round #353 (Div. 2) A. Infinite Sequence

    Vasya likes everything infinite. Now he is studying the properties of a sequence s, such that its fi ...

  2. Android Intent (可通过URL启动 Activity)

    Intent分为两大类: (1)显性的(Explicit) (2)隐性的(Implicit) 对于隐性意图,在某些时候, 应用程序只是想启动具有某种特征的组件, 并不想和某个特定的组件耦合. 使用In ...

  3. CODEVS 1817 灾后重建 Label:Floyd || 最短瓶颈路

    描述 灾后重建(rebuild)  B地区在地震过后,所有村庄都造成了一定的损毁,而这场地震却没对公路造成什么影响.但是在村庄重建好之前,所有与未重建完成的村庄的公路均无法通车.换句话说,只有连接着两 ...

  4. 【noiOJ】p1481

    1481:Maximum sum 查看 提交 统计 提问 总时间限制:  1000ms 内存限制:  65536kB 描述 Given a set of n integers: A={a1, a2,. ...

  5. Android -- TabHost

    TabHost 也就相当于Windows下的选项框 有两种实现方式 1.  继承TabActivity (已经废弃):从TabActivity中用getTabHost()方法获取TabHost 2. ...

  6. asp.net mvc4 HTTP Error 403.14

    asp.net mvc4项目部署到II&上时,出现HTTP Error 403.14 - Forbidden - The Web server is configured to not lis ...

  7. Nginx_HTTP 499 状态码 nginx下 499错误

    日志记录中HTTP状态码出现499错误有多种情况,我遇到的一种情况是nginx反代到一个永远打不开的后端,就这样了,日志状态记录是499.发送字节数是0. 老是有用户反映网站系统时好时坏,因为线上的产 ...

  8. [LintCode] Maximal Square 最大正方形

    Given a 2D binary matrix filled with 0's and 1's, find the largest square containing all 1's and ret ...

  9. [CareerCup] 16.2 Measure Time in a Context Switch 测量上下文转换的时间

    16.2 How would you measure the time spent in a context switch? 上下文转换发生在两个进程之间,比如让一个等待进程进入执行和让一个运行进程进 ...

  10. ubuntu上安装Eclipse时遇到的一个错误

    A Java Runtime Environment (JRE) or Java Development Kit (JDK)must be available in order to run Ecli ...