js webapp 滑动事件
var startX, startY, endX, endY;
$(".detailImg").on("touchstart", touchStart);
$(".detailImg").on("touchmove", touchMove);
$(".detailImg").on("touchend", touchEnd);
function touchStart(event) {
var touch = event.originalEvent.targetTouches[0];
startX = touch.pageX;
event.preventDefault();//在andorid下不触发touchend解决方案
};
function touchMove(event) {
var touch = event.originalEvent.targetTouches[0];
endX = (startX - touch.pageX);
};
function touchEnd(event) {
if (endX > 10)
nextImgCallBack();
else if (endX < -10)
proImgCallBack();
endX = 0; startX = 0;
};
js webapp 滑动事件的更多相关文章
- 移动端js手指滑动事件初体验
今天在公司遇到做一个移动端手指滑动的效果,刚開始用了swiper.js插件发现效果不好(文字存在模糊效果).后来查了一些资料,自己手写了一个使用原生js写的滑动效果. 以下直接上代码: <!do ...
- JS移动客户端--触屏滑动事件 banner图效果
JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t ...
- 移动端上下滑动事件之--坑爹的touch.js
下面的方法,不知道是操作方法不对还是啥. 在 zepto.js 里面加那一段代码不起作用 百度的 touch.js 是可以用的,但是使用方式 和 zepto有点不一样. 解决方案:参照这个链接地址 ...
- 移动端上下滑动事件之--坑爹的touch.js
原文 http://blog.csdn.net/minidrupal/article/details/39611605 移动端页面的盛行,微信的便利的页面推广等等,让越来越多的css3效果和htm ...
- js的touch事件的实际引用
一开始做前端页面的时候,接触的也是js,但是随后便被简单高效的jquery吸引过去,并一直使用至今. 而js,则被我主观的认为底层技术而抛弃. 直到这几天工作需要,研究移动端页面的触屏滑动事件,搜索j ...
- hammer.js的六大事件
1.Pan事件:在指定的dom区域内,一个手指放下并移动事件,即触屏中的拖动事件.这个事件在触屏开发中比较常用: Panstart 拖动开始 Panmove 拖动过程 Panend 拖动结束 Panc ...
- webview滑动事件 与内部html左右滑动事件冲突问题的解决办法
最近在做个混合app , 用html做页面,然后通过webview嵌套在activity中,效果是这样: 开始还是比较顺利,增加了菜单退出按钮,返回键页面回退功能,页面加载显示加载图标(在app端实现 ...
- js的Touch事件
js的touch事件,一般用于移动端的触屏滑动$(function(){document.addEventListener("touchmove", _touch, false); ...
- 移动设备、手机浏览器Javascript滑动事件代码
以下经过本人测试成功. 测试平台:三星S5830I 操作系统:Android 2.3.6 浏览器:UC浏览器 HTML标准:HTML5 测试了三个事件:touchstart.touchmove 和 t ...
随机推荐
- django with mysql (part-3)
step01: write second view-function vim views.py step02: configure your ( urls.py ) vim urls.py step0 ...
- 判断输入的数是否为数字,不使用isNaN
虽然不使用 isNaN ,但使用了 Math 的一些方法. <!-- Author: XiaoWen Create a file: 2016-12-08 11:14:34 Last modifi ...
- atitit.提升开发效率---MDA 软件开发方式的革命(3)----自动化建表
atitit.提升开发效率---MDA 软件开发方式的革命(3)----自动化建表 1. 建模在后自动建表 1 1. 传统上,需要首先建表,在业务编码.. 1 2. 模型驱动建表---更多简化法是在建 ...
- Java集合——题目
第一题 (Map)利用Map,完成下面的功能: 从命令行读入一个字符串,表示一个年份,输出该年的世界杯冠军是哪支球队.如果该 年没有举办世界杯,则输出:没有举办世界杯. 附:世界杯冠军以及对应的夺冠年 ...
- iOS开发---分类和扩展(Categories和Extensions)
1.分类能够做到的事情主要是:即使在你不知道一个类的源码情况下,向这个类添加扩展的方法. 此外,分类能够保证你的实现类和其他的文件区分开. 1 #import “UIViewControl ...
- android: 内容提供器简介
我们学了 Android 数据持久化的技术,包括文件存储.SharedPreferences 存 储.以及数据库存储.不知道你有没有发现,使用这些持久化技术所保存的数据都只能在当 前应用程序中访问.虽 ...
- STM32 CANBus RAM Layout
F8 FF FF FF //F0R0 F0R1 F8 FF FF FF //F1R0 F1R1 F8 FF FF FF F8 FF FF FF F8 FF FF FF F8 FF FF FF F8 F ...
- eclipse、myeclipse,svn插件subclipse 忘记密码的解决方法(win7、win8、xp)
如果是Windows7.Windows8系统只要删除当前用户目录下的AppData\Roaming\Subversion\auth\svn.simple 比如我的用户名taoweiji,就删除C:\U ...
- java/.net-常用工具下载地址&常用学习网址&快捷键
HTML5 HTML5:http://www.html5cn.org/ php常用网址 thinkphp框架:http://www.thinkphp.cn/ wampserver开发服务器:http: ...
- BZOJ 4726: [POI2017]Sabota? 树形dp
4726: [POI2017]Sabota? 题目连接: http://www.lydsy.com/JudgeOnline/problem.php?id=4726 Description 某个公司有n ...