Slip——整屏滑动，移动端跟随手指滑动

简介

移动端跟随手指滑动组件，零依赖。

使用方法

1、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>

2、调用

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(document.getElementById('container'), 'y').webapp().end(function() {if (this.page === 3) location.reload();
});

参数

http://binnng.github.io/slip.js/docs/

SlipJs首页、文档和下载：https://www.oschina.net/p/slipjs

GitHub：https://github.com/binnng/slip.js（参数及API）

Slip——整屏滑动，移动端跟随手指滑动相关推荐

移动端手指滑动，高度跟随手指滑动位置而改变
效果:列表刚开始显示高度为200,手指滑动,列表高度随手指位置改变,列表最高高度为500 实现这个功能之前先说一下手指触摸事件 //手指按下触发 touchstart(event) {var touc ...
Android自定义View，跟随手指滑动效果
Android自定义View,实现跟随手指滑动效果, 效果如下: 一,重写onTouchEvent方法最后返回true 二,在MotionEvent.ACTION_MOVE情况下改变自定义view ...
android歌词跟随手势滑动,Android实现跟随手指拖动并自动贴边的View样式(实例demo)...
效果图代码 /** * 根据手指拖动的当前位置,自动贴边的View */ public class DragView extends ImageView implements View.OnTouc ...
html5游戏指尖跟随,图片跟随手指滑动
touch事件,给你个简单的事例吧,返回动画什么的你自己完成吧,我是直接返回的. *{ margin: 0; padding: 0; } html{ width: 100%; height: 100% ...
使用hammer.js实现移动端手指滑动切换轮播图教程
今天面试前端开发时,要求在移动端实现手指滑动切换轮播图这里我用到 bootsrap 的轮播图组件 + hammer.js 库文章参考: Hammer.js - 李林峰的园子 - 博客园 (cnbl ...
通过触摸屏幕/鼠标图片跟随手指加滑动效果
<领导关怀版本需求3> 一:图片本地加载,打字效果,循环播放二:通过触摸屏幕/鼠标滑动三:跟随手指,滑动效果版本系列(一):实现了读取本地图片,循环播放功能版本系列(二):原来 ...
jquery 手指滑动多半屏_JS拖拽专题(五)——「玩出花儿来」移动端滑动事件的封装...
欢迎来到我的JS拖拽专题系列文章,本章节将是拖拽系列的最后一篇.感谢大家的支持^_^ 上一章节我们说到了拖拽让图片相互之间交换位置,相对来说是一个比较综合的示例,涉及到了矩形的碰撞检测,勾股定理计算两 ...
手指在屏幕上滑动，红色的小球始终跟随手指移动。
实现的功能: 手指在屏幕上滑动,红色的小球始终跟随手指移动. 实现的思路: 1)自定义View,在onDraw中画圆作为小球: 2)重写自定义View的onTouchEvent方法,记录触屏坐标,用新 ...
Android自定义View之跟随手指一起滑动的五色的小球
一. 实现的功能:手指在屏幕上滑动,变幻颜色的小球始终跟随手指移动. 二. 实现的思路: 1)自定义View,在onDraw中画圆作为小球: 2)重写自定义View的onTouchEvent方法,记录 ...

Slip——整屏滑动，移动端跟随手指滑动

简介

使用方法

参数

Slip——整屏滑动，移动端跟随手指滑动相关推荐

最新文章

热门文章