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 ...
随机推荐
- linux下ssh远程登录服务器入门操作
使用用户名密码登录 在命令行中输入命令: ssh username@ip_address -p port 之后系统会提示输入密码,输入后即可登录 如果不添加-p选项,则默认是22端口 还可以使用-l选 ...
- duilib进阶教程 -- 改进窗口拖动 (12)
现在大家应该都知道caption="0,0,0,32",是指示标题栏区了吧,如果想要整个窗口都能拖动呢? 那直接把高度改成和窗口一样不就得了~O(∩_∩)O~ 嗯,这样是可以,比如 ...
- atitit.ajax bp dwr 3.的注解方式配置使用流程总结.....
atitit.ajax bp dwr 3.的注解方式配置使用流程总结..... 1. 下载 dwr.jar 1M 1 2. 配置注解方式..web.xml 1 3. Class 配置 2 4. 测试 ...
- 盘点mysql中容易被我们误会的地方
引语:mysql作为数据库的一大主力军,到处存在于我们各种系统中,相信大家都不陌生!但是,你知道你能用不代表你知道细节,那我们就来盘点盘点其中一些我们平时不太注意的地方,一来为了有趣,二来为了不让自己 ...
- jQuery实现左移右移
<html> <head> <meta charset="utf-8"> <title>完成左移右移</title> & ...
- WindowsPhone App如何扩展能够使用的内存
目前手机系统中对App的内存使用都是有限制的,尤其是对于Android和WindowsPhone这样的平台,因为机型很多,配置高低不同因此对于同一个App在不同的手机上运行的效果也不同. WP上通常对 ...
- 详解Bootstrap表单组件
表单常见的元素主要包括:文本输入框.下拉选择框.单选框.复选框.文本域.按钮等.下面是不同的bootstrap版本: LESS: forms.less SASS: _forms.scss boot ...
- Redis info参数总结(转)
Redis官网对 info 已经讲解的比较清楚的,参考文档 . 可以看到,info的输出结果是分几块的,有Servers.Clients.Memory等等,通过info后面接这些参数,可以指定输出某一 ...
- RFID 读写器 Reader Writer Cloner
RFID读写器的工作原理 RFID的数据采集以读写器为主导,RFID读写器是一种通过无线通信,实现对标签识别和内存数据的读出和写入操作的装置. 读写器又称为阅读器或读头(Reader).查询器(Int ...
- Open vSwitch实践——VLAN
# virt-clone --original=centos65 --name=vm2 --file=vm2.qcow2 正在克隆 centos65.qcow2 ...