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 ...
随机推荐
- jenkins插件 查看job修改历史
文章来自:http://www.ciandcd.com文中的代码来自可以从github下载: https://github.com/ciandcd 插件jobConfigHistory(https:/ ...
- 使用SharePoint CSOM 编写高效的程序
上一篇文章中简单的介绍了使用CSOM进行编程.今天主要讲一下CSOM使用中一些小技巧,可以让你的程序运行的更快. 单独加载某些属性 在上文中的例子,需要返回Web对象信息的时候,我们使用了如下的代码: ...
- C#课外实践——校园二手平台(技术篇2)
说明:一个人的进步都是点点滴滴的积累起来的.接着总结这次的课外实践. 有时候,想这样,3个Combox,当第一个ComBox选择以后,第二个ComBox会根据第一个的选择结果来显示相对应的内容.其实你 ...
- Linux驱动学习步骤(转载)
1. 学会写简单的makefile 2. 编一应用程序,可以用makefile跑起来 3. 学会写驱动的makefile 4. 写一简单char驱动,makefile编译通过,可以insmod, ls ...
- atitit.提升开发效率---mda 软件开发方式的革命
atitit.提升开发效率---mda 软件开发方式的革命 1. 软件开发方式的革命开发工具的抽象层次将再次提升 1 2. 应用框架和其实现相分离 2 3. 目前的问题模型和代码不同步 2 4. MD ...
- shiny server SparkR web展示界面(一)
1. shiny server简介 shiny-server是一种可用把R 语言以web形式展示的服务,下面就讲讲如何在自己的服务器上构建Shiny Server.下一篇主要介绍如何集成sparkR后 ...
- iOS开发——高级技术&通讯录服务
通讯录服务 AddressBook iOS中带有一 个Contacts应用程序来管理联系人,但是有些时候我们希望自己的应用能够访问或者修改这些信息,这个时候就要用到 AddressBook.frame ...
- LoadRunner在移动端性能测试的应用
摘选自 <精通移动app测试实战:技术.工具和案例>新书上市 如果大家之前做过性能测试,我相信一定会应用过大名鼎鼎的性能测试工具-LoadRunner.目前LoadRunner的最新版本为 ...
- C# 传入引用类型的参数 返回值是否发生变化
前一段时间做项目是,一YY说如果一个方法的参数是引用类型,那么在这个方法里面所做的所有的修改再方法调用后应该有体现.事实是这样的吗? 先看code 和运行结果: 运行结果 方法SetPersonInf ...
- JavaScript学习汇总
对于JavaScript,还是无法割舍,有心无力,时间总是匆匆,暂且都放在这里吧 javascript中this的使用 写的很不错的一偏文章,简单看了下,mark了吧 原文:http://davids ...