js实现移动端手指左右上下滑动翻页效果
var ele = document.getElementsByClassName("img-box")[0];
var beginX, beginY, endX, endY, swipeLeft, swipeRight;
ele.addEventListener('touchstart', function (event) {
event.stopPropagation();
event.preventDefault();
beginX = event.targetTouches[0].screenX;
beginY = event.targetTouches[0].screenY;
swipeLeft = false, swipeRight = false;
}); ele.addEventListener('touchmove', function (event) {
event.stopPropagation();
event.preventDefault();
endX = event.targetTouches[0].screenX;
endY = event.targetTouches[0].screenY;
// 左右滑动
if (Math.abs(endX - beginX) - Math.abs(endY - beginY) > 0) {
/*向右滑动*/
if (endX - beginX > 0) {
swipeRight = true;
swipeLeft = false;
}
/*向左滑动*/
else {
swipeLeft = true;
swipeRight = false;
}
}
else if(Math.abs(endX - beginX) - Math.abs(endY - beginY) < 0)
{
// 上下滑动
}
});
ele.addEventListener('touchend', function (event) {
event.stopPropagation();
event.preventDefault(); if (Math.abs(endX - beginX) - Math.abs(endY - beginY) > 0) {
event.stopPropagation();
event.preventDefault();if (swipeRight) {
swipeRight = !swipeRight;
/*向右滑动*/
}
if(swipeLeft) {
swipeLeft = !swipeLeft;
/*向左滑动*/
}
}
});
除了这种方法之外可以使用第三方插件来实现同样的效果,如QuoJS包含了多种移动端手势效果及ajax请求等操作,但是在使用过程中遇到了问题。使用了QuoJS后,会造成JQuery的一些单击事件和一些a标签href属性失效。并且发现QuoJS的swipeLeft和swipeRight事件中,手指只能水平滑动,如果稍微倾斜一点滑动,则事件不生效,也不知道是不是本人的设备问题。
js实现移动端手指左右上下滑动翻页效果的更多相关文章
- 微信里经常看到的滑动翻页效果,slide
上个星期我们的产品姐姐让我帮她写个微信里经常看到的滑动翻页效果,今天抽空写了3个小demo(只写了webkit需要chrome模拟手机看 开启touch事件), 故此写个随笔. 1.demo1,整个大 ...
- ViewPager实现滑动翻页效果
实现ViewPager的滑动翻页效果可以使用ViewPager的setPageTransformer方法,如下: import android.content.Context; import andr ...
- 基于vue实现上下滑动翻页效果
18年年底的时候,一直在做年度报告的H5页面,因为项目需要,需要实现上下滑动翻页,并且上滑的页面比正常页面的比例要缩小一定比例. 效果类似于http://www.17sucai.com/pins/de ...
- 桌面浏览器实现滑动翻页效果(Swiper)
还是那个号称很炫的B/S展示软件,在液晶屏上展示需要有滑动翻页的效果(在同一页面滑动切换内容,不是切换页面),最后确定使用功能很强大的Swiper类库. 具体优点可参考:http://www.chin ...
- vue案例 - vue-awesome-swiper实现h5滑动翻页效果
说到h5的翻页,很定第一时间想到的是swiper.但是我当时想到的却是,vue里边怎么用swiper?! 中国有句古话叫:天塌下来有个高的顶着. 在前端圈里,总有前仆后继的仁人志士相继挥洒着热汗(这里 ...
- 转载 vue-awesome-swiper - 基于vue实现h5滑动翻页效果
说到h5的翻页,很定第一时间想到的是swiper.但是我当时想到的却是,vue里边怎么用swiper?! 中国有句古话叫:天塌下来有个高的顶着. 在前端圈里,总有前仆后继的仁人志士相继挥洒着热汗(这里 ...
- jquery插件实现上下滑动翻页效果
<!DOCTYPE > <meta charset="utf-8" /> <head> <title>测试jquery</ti ...
- Android学习笔记之滑动翻页(屏幕切换)
如何实现手机上手动滑动翻页效果呢?呵呵,在这里我们就给你们介绍一下吧. 一般实现这个特效会用到一个控件:ViewFlipper <1>View切换的控件—ViewFlipper 这个控件是 ...
- 移动端ios上下滑动翻页事件失效
移动端开发过程中,在添加上下滑动事件时候,引入了最常用的移动端库zepto.js及其touch模块,有一种现象,安卓的手机没有问题,上下滑动翻页很正常 :但是到了ios上面,好啊,上下滑动会出现弹性滚 ...
随机推荐
- 数据bus
moo的Hessian总线的数据通信模式大致为: Hessian 格式:基于二进制格式的用于网络传输的协议.Hessian格式数据流的是实现 java.io.Serializable接口.当两个进程在 ...
- EF架构~CodeFirst数据迁移与防数据库删除
回到目录 本文介绍两个概念,防数据库自动删除,这是由于在code first模式下,当数据实体发生变化时,会对原来数据库进行删除,并将新数据表添加进来,但这对于我们的运营环境数据库,是万万不能接受的, ...
- Java程序员的日常 —— 多进程开发IO阻塞问题
本篇仍旧是源于最近的工作,总结一下纪念那些年埋下的坑... 背景故事 需求:"使用进程方式启动另一个程序!" 开发:"OK! Runtime.getRuntime().e ...
- HTML按钮实现!!!文件上传,遮罩层
按钮上传文件: <input type="file" /> file的意思为提交 每个游览器的显示方式都不一样哦 遮罩层: 设两个id <style type ...
- vs如何在C++中调用Lua
最近Cocos2dx的学习卡壳了,一般的照抄代码我不想写上来,但想示例也想得我头晕...为了放松大脑调整状态于是开始学习Lua.Lua的语法学习还是比较简单的,学过javascript或者vbscri ...
- Atitit 开发2d游戏的技术选型attilax总结
Atitit 开发2d游戏的技术选型attilax总结 1.1. 跨平台跨平台:一定要使用跨平台的gui技术,目前最好的就是h5(canvas,webgl,dom) +js了..1 1.2. 游戏前后 ...
- JS的脚本语言
js的脚本语言全程javascript在网页里面使用的脚本语言:分类:1.嵌入网页里面2.在外部脚本标签可以写在网页的任何地方,但一般都写在网页的底部:<script type="te ...
- salesforce 零基础学习(三十六)通过Process Builder以及Apex代码实现锁定记录( Lock Record)
上一篇内容是通过Process Builder和Approval Processes实现锁定记录的功能,有的时候,往往锁定一条记录需要很多的限制条件,如果通过Approval Processes的条件 ...
- 移动端调试工具DebugGap推荐。
因为现在项目大部分都是在写移动端,但是调试起来实在是不方便,虽然可以用chrome来模拟手机端,但实际上差别还是有点大的,最近找到了一款比较不错的调试工具,这里分享一下了,虽然网上已经有分享过了,但还 ...
- 【Hibernate】一级、二级缓冲
Hibernate缓冲按级别共分为两种,一级缓冲(Session)和二级缓冲(SessionFactory),有的也说是三种,还有一种是查询缓冲,当然,查询缓冲是依托于二级缓冲. ok,什么是缓冲? ...