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. 2014-2015 ACM-ICPC, NEERC, Moscow Subregional Contest F. Friends

    F. Friends time limit per test 2 seconds memory limit per test 256 megabytes input standard input ou ...

  2. Nodejs-搭建Nodejs开发环境

    学习nodejs,需要一个好的开发工具,并不想用无智能提示和不友好格式的记事本编写 1. 从www.nodejs.org下载nodejs并安装到指定的目录. 2. 下载一个开发工具, 可以选择webs ...

  3. 【BZOJ】1105: [POI2007]石头花园SKA

    题意 二维平面上有\(n(2 \le n \le 1000000)\)个点,可以花费\(w_i\)交换第\(i\)个点的横纵坐标.求在满足能覆盖所有点的最小矩阵周长最短的情况下花费最小. 分析 这题太 ...

  4. 【POJ】1811 Prime Test

    http://poj.org/problem?id=1811 题意:求n最小素因子.(n<=2^54) #include <cstdio> #include <cstring& ...

  5. wind.onload和$(document).ready()的区别例示

    例子: <html> <script type="text/javascript" src="jquery-1.7.1.min.js"> ...

  6. WZJ的blog开通了

    WZJ的blog开通了

  7. Let It Be - The Beatles - Lyrics

    轉載自 https://www.youtube.com/watch?v=0714IbwC3HA When I find myself in times of trouble, Mother Mary ...

  8. asp.net 操作Excel大全

    asp.net 操作Excel大全 转:http://www.cnblogs.com/zhangchenliang/archive/2011/07/21/2112430.html 我们在做excel资 ...

  9. Eqs

    Eqs 题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=15029 题意: 给出系数a1,a2,a3,a4,a5,求出 ...

  10. iOS下的 Fixed + Input 调用键盘的时候fixed无效问题解决方案

    做touchweb开发的时候,做头疼的是,电脑上面时候好的,有些手机上面也是好的,个别手机和浏览器出现问题,对于这些,只能慢慢调试,找问题. 今天说一下比较老的IOS的问题,那就是"iOS下 ...