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 ...
随机推荐
- fir.im Weekly - 如果让你重新做一款APP
设想下:如果让你重新做一款 APP ,你会用到哪些开发.设计等资源和工具? 本期的 Weekly 为大家分享了最近不错的 APP 开发资源,大部分是关于 iOS 开发. Android 开发.UI设计 ...
- dao层
/* * 查询 */ public List<User> selectAll(); public User findById(String id); public User findByU ...
- linux平台下防火墙iptables原理(转)
原文地址:http://www.cnblogs.com/ggjucheng/archive/2012/08/19/2646466.html iptables简介 netfilter/iptables( ...
- 在Servlet中出现一个输出中文乱码的问题(已经解)。
在Servlet中出现一个输出中文乱码的问题,已经解. @Override public void doPost(HttpServletRequest reqeust, HttpServletResp ...
- 转connect() to unix:/var/run/php-fpm.sock failed (11: Resource temporarily unavailable)
网站常出现502 bad gateway,程序没有问题. 根据nginx日志:connect() to unix:/var/run/php-fpm.sock failed (11: Resource ...
- 关于ORACLE的重启命令
有时候数据死了,或者没有监听,不必重启机子,重启一下数据库服务行了,下面是linux下的启动步骤,没有在win下执行过,可能也可以!以oracle9i为例(1) 以oracle身份登录数据库,命令:s ...
- Sicily 3913. 阶乘之和
http://soj.me/3913 一开始被它的数据吓到了,还以为很复杂,但想清楚之后,确实是比较简单的,你只需要算到 24! 就行了,大于 24 的时候答案永远是 940313,因为我们是对 10 ...
- Halcon学习标定助手
本文采用halcon标定助手进行标定. 第一步:打开标定助手. 第二步:对描述文件进行修改 具体:打开算子窗口,输入gen_caltab,进行描述文件修改. 参数XNum和YNum为7行*7列的圆,M ...
- [转]Android 超高仿微信图片选择器 图片该这么加载
快速加载本地图片缩略图的方法: 原文地址:Android 超高仿微信图片选择器 图片该这么加载 其示例代码下载: 仿微信图片选择器 ImageLoader
- RabbitMQ学习笔记5-简单的RPC调用
利用空的queue名字("")让rabbitMQ生成一个唯一的队列名称,同时指定队列是:临时的(auto-delete).私有的(exclusive). 在发送的RPC调用消息里设 ...