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. BZOJ3425 : Poi2013 Polarization

    最小值肯定是把树看作二分图,此时答案为$n-1$. 最大值一定是选取重心为根,任意一个子树要么全部指向根,要么全部背离根,这样可以制造最大的星型图. 统计出每个子树的大小后做01背包,如果小于$\sq ...

  2. Android 情景模式设置

    情景模式的设置大家应当相当熟悉了,但是在Android中如何通过自己的程序进行情景模式的设置呢,情景模式分为多种多种,即可以使用系统自带的,也可 以使用自定义的,但是在开发某些程序时,可能需要在程序中 ...

  3. 【BZOJ】2697: 特技飞行

    题意 \(k(1 \le k \le 300)\)种物品,价值分别为\(c_i(0 \le c_i \le 1000)\).有\(n(1 \le n \le 1000)\)分钟,每分钟可以选择一个物品 ...

  4. CF 9D. How many trees?(dp)

    题目链接 以前做过类似的,USACO,2.3,开始数组开小了,导致数据乱了,然后超数据范围了,.. #include <cstdio> #include <iostream> ...

  5. NOI模拟赛Day4

    看到成绩的时候我的内心** woc第一题写错了呵呵呵呵呵呵呵呵 人不能太浪,会遭报应的** ------------------------------------------------------ ...

  6. java画图程序_图片用字母画出来_源码发布

    在之前写了一篇blog:java画图程序_图片用字母画出来 主要是把一些调试的截图发布出来,现在程序调试我认为可以了(当然,你如果还想调试的话,也可以下载源码自己调试). 就把源码发布出来. 项目结构 ...

  7. [IBM DB2] db2 terminate 和 db2 connect reset 有什么区别?

    [IBM DB2] db2 terminate 和 db2 connect reset 有什么区别?  总结:如果是退出编辑器 quit :如果是断开数据库连接释放资源 connect reset : ...

  8. LVS + KEEPAlived 配置 DIR模式

    1 .1 Lvs LVS是Linux Virtual Server的简写,意即Linux虚拟服务器,是一个虚拟的服务器集群系统.本项目在1998年5月由章文嵩博士成立,是中国国内最早出现的自由软件项目 ...

  9. osgearth各个例子功能概述

    osgearth各个例子功能概述 转自:http://blog.csdn.net/wl198302/article/details/21177309 最近在学习osgearth,对其还不是很理解,有些 ...

  10. 浅谈iOS视频开发

     浅谈iOS视频开发 这段时间对视频开发进行了一些了解,在这里和大家分享一下我自己觉得学习步骤和资料,希望对那些对视频感兴趣的朋友有些帮助. 一.iOS系统自带播放器 要了解iOS视频开发,首先我们从 ...