Slip.js（移动端跟随手指滑动组件，零依赖）
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（移动端跟随手指滑动组件，零依赖）的更多相关文章
- js移动端滑块验证解锁组件
本文修改自PC端的js滑块验证组件,PC端使用的是onmousedown,onmouseup,nomousemove.原文找不到了,也是博客园文章,在此感谢广大网友的生产力吧. 说下对插件和组件的理解 ...
- js移动端向左滑动出现删除按钮
最近在做移动端项目时,需要实现一个列表页面的每一项item向左滑动时出现相应的删除按钮,本来想着直接使用zepto的touch.js插件,因为之前实现相同的功能时用过这个插件,当时还挺好用的,直接使用 ...
- onTouchEvent中，跟随手指滑动的view出现抖动
在这次实践中,它抖动得不正常,太不正常,太抖. 其实是我代码上出现了问题,记录一下. 我是怎么设置滑动的呢? 通过改变view的margin. 然而我在onTouchEvent中怎么控制它滑动的大小呢 ...
- 第二章实例：动态生成View控件例子---小球跟随手指滑动
package mydefault.packge; import android.app.Activity; import android.content.Context; import androi ...
- vue 移动端轻量日期组件不依赖第三方库
Vue版移动端日期选择组件 1.优点:不需要依赖其他第三方库,灵活可配置: 不需要依赖第三方组件的vue日期移动端组件 小轮子 轻量可复用: https://github.com/BeckReed ...
- Vue.js 桌面端自定义滚动条组件|vue美化滚动条VScroll
基于vue.js开发的小巧PC端自定义滚动条组件VScroll. 前段时间有给大家分享一个vue桌面端弹框组件,今天再分享最近开发的一个vue pc端自定义滚动条组件. vscroll 一款基于vue ...
- 移动端 uni-app 滑动事件 精确判断手指滑动方向
移动端根据手指滑动操作判断滑动方向 设计思路: 1.根据移动端touchstart和touchend方法获取手指触摸屏幕的开始坐标和结束坐标 2.根据两个坐标计算与水平方向的夹角 3.根据夹角判断当前 ...
- 移动端js手指滑动事件初体验
今天在公司遇到做一个移动端手指滑动的效果,刚開始用了swiper.js插件发现效果不好(文字存在模糊效果).后来查了一些资料,自己手写了一个使用原生js写的滑动效果. 以下直接上代码: <!do ...
- JS案例之5——移动端触屏滑动
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...
随机推荐
- 使用TCMalloc优化OpenResty
1.安装依赖包 yum -y install wget gcc gcc-c++ -y 2.安装libunwind库可以从http://ftp.twaren.net/Unix/NonGNU//libun ...
- 【BZOJ1179】 [Apio2009]Atm tarjan缩点+SPFA
Description Input 第一行包含两个整数N.M.N表示路口的个数,M表示道路条数.接下来M行,每行两个整数,这两个整数都在1到N之间,第i+1行的两个整数表示第i条道路的起点和终点的路口 ...
- C语言（4）
C语言(4)--数据类型 C语言在用“/”是,注意左右两边都是整数时,商也是只有整数部分. 下面介绍一下C语言常用的数据类型: 注意: 1.char类型数据范围:256中字符. 2.float和do ...
- not only ... but also
轉載自http://210.240.55.2/~t311/moe/engb6/b6grammar/b6notonly.htm not only ... but also ... 是「不僅‧‧‧也是‧‧ ...
- 百度ueditor 拖文件或world 里面复制粘贴图片到编辑中 上传到第三方问题
我这边从world 里面复制粘贴图片到编辑器中,它自动给我上传了,但是我是用的第三方的要设置一个token值,我找了很久,也没有找到应该在哪里设置这个上传的参数,如果是点击图片上传,我知道在dialo ...
- Red KV数据 庫设計模式
转:http://blog.nosqlfan.com/html/3033.html NoSQL带给我们的东西很多,高性能,水平扩展性,还有不一样的思维方式.本文来自@hoterran的个人博客运维与开 ...
- 【转】在C#中使用SendMessage
SendMessage是一个在user32.dll中声明的API函数,在C#中导入如下: using System.Runtime.InteropServices; [DllImport(" ...
- Linux下memcached安装和启动方法
Linux下memcached安装和启动方法 1. 首先下载memcached 和 libevent 包. Memcached用到了libevent这个库用于Socket的处理.下面是下载的两个包文件 ...
- 【Go语言】I/O专题
本文目录 1.bytes包:字节切片.Buffer和Reader 1_1.字节切片处理函数 1_1_1.基本处理函数 1_1_2.字节切片比较函数 1_1_3.字节切片前后缀检查函数 1_1_4.字节 ...
- Pixar Shorts 皮克斯动画短片全集
[原创短片](Theatrical Shorts)16部 <安德鲁和威利冒险记><顽皮跳跳灯><红色的梦><锡铁小兵><小雪人大行动>< ...