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. ural 1255. Graveyard of the Cosa Nostra

    1255. Graveyard of the Cosa Nostra Time limit: 1.0 secondMemory limit: 64 MB There is a custom among ...

  2. Django的cookie和session

    http://www.cnblogs.com/lhj588/archive/2011/10/27/2226976.html

  3. Word: How to Temporarily Disable Spell Check in Word

    link: http://johnlamansky.com/tech/disable-word-spell-check/ 引用: Word 2010 Click the “File” button C ...

  4. BZOJ4118 : [Wf2015]Window Manager

    OPEN.CLOSE.RESIZE操作直接模拟即可. 对于MOVE,设$f_i$表示$i$号矩形的坐标,先无视边界通过DP求出每个矩形的坐标,再根据边界反向用第二次DP求出被移动矩形移动的真实距离,再 ...

  5. XCOJ 1103 (LCA+树链最大子段和)

    题目链接: http://xcacm.hfut.edu.cn/problem.php?id=1103 题目大意:链更新.链查询,求树链的最大子段和.(子段可以为空) 解题思路: 将所有Query离线存 ...

  6. linux下创建，删除，移动文件命令

    创建文件:touch + filename 删除文件:rm + filename 复制文件:cp + filename + dirname 移动文件:mv + filename + dirname 注 ...

  7. css设置移动端checkbox和radio样式

    复选框Checkbox是Web应用常用控件,随处可见,原生的复选框控件一般就像下面这样: 这取决于操作系统和浏览器,有些时候,这种样子并不能满足设计要求,这时需要更为精致的复选框样式.以往只有少数浏览 ...

  8. ArcGIS初步 系列视频教程

    本人才疏学浅,但鉴于较少的ArcGIS10以上版本的学习视频,所以利用业余时间做了这么个业余的视频系列教程,本随笔提供在线观看地址与720P原版下载地址. 1认识ArcGIS 优酷在线地址  (优酷清 ...

  9. Linux_vi编辑器

    一.vi/vim编辑器的三种模式 1. 命令模式 2. 插入模式 3. 最后行模式 eRrsr@hadoop09-linux tmp]$ vi vi.txt # 命令行 start to write ...

  10. thinkphp 的create()非法数据解决办法

    是因为create()方法默认是使用post传值的,把from表单的传值方法改成post就行了,默认是get.