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. BZOJ4607 : [PA2015 Final]Edycja

    显然做完操作$2$后再做操作$1$. 建立一个$26$个点的有向图,每个点只有一条出边,$i$->$j$表示$i$最终变成了$j$,边权为一开始是$i$,最后不是$j$的位置个数,如果$i\ne ...

  2. BZOJ3084 : [Algorithmic Engagements 2011]The Shortest Period

    枚举答案长度$L$,设$A$和$B$分别为第一个循环节和反串的第一个循环节. 1.坏点不在$A$,那么可以暴力匹配检验. 2.坏点不在$B$,那么把串翻转后不在$A$中,转化为1. 3.坏点在$A$和 ...

  3. Hadoop维护IPC链接

    IPC链接上长时间没有发生远程调用,客户端会发送一个心跳消息给服务器端,用于维护链接. Connection的lastActivity用来记录上次发生IPC通信的时间. Connection.touc ...

  4. Codeforces Round #228 (Div. 2) A. Fox and Number Game

    #include <iostream> #include <algorithm> #include <vector> #include <numeric> ...

  5. 【CodeVS】 p1077 多源最短路

    题目描述 Description 已知n个点(n<=100),给你n*n的方阵,a[i,j]表示从第i个点到第j个点的直接距离. 现在有Q个询问,每个询问两个正整数,a和b,让你求a到b之间的最 ...

  6. 常见 bug

    1.发言时,输入框中输入多个空格.

  7. 友盟微博分享Undefined symbols for architecture x86_64: "_OBJC_CLASS_$_CTTelephonyNetworkInfo", referenced from: objc-class-ref in libWeiboSDK.a

    一,分析过程 1.第一次看到这个问题,以为是缺少导入框架或缺少编译文件,导入了微博 sso 框架和编译文件后仍有问题. 2.上网搜了搜也就以上两方面的问题. 3.于是我又仔细看了一遍友盟的分享接口文档 ...

  8. C# 委托和Lambda---基础

    [委托]是一个类可以把一个方法当作另一个方法的参数使用. 声明委托:delegate string 委托名(参数列表);//跟定义方法一样,只是没有方法体,必须使用关键字delegate使用委托的函数 ...

  9. C语言中if语句

    C语言if语句后面的表达式 C语言中if关键字之后(即括号内)均为表达式. 该表达式通常是逻辑表达式或关系表达式,但也可以是其它表达式,如赋值表达式等,甚至也可以是一个变量,这些变量的值都换算成了逻辑 ...

  10. Vue.js组件示例

    一 外部引入文件:(全局注册) //建模版 var mycomponent=Vue.extend( {template:"<div><a href='#'>我爱Jav ...