touchstart ,touchmove, touchend 页面随手指滑动

<pre style="font-family: 'Courier New'; background-color: rgb(255, 255, 255);"><span style="font-size:32px;">js写法</span>

</pre><pre code_snippet_id="1717282" snippet_file_name="blog_20160615_3_9095677" name="code" class="html">

//详情页滑出效果
function swipePage(){//页面滑动切换效果//$("#goodsdetil").animate({right:-(e.pageX)}/*,400,function(){$("#goodsMealDiv").empty();}*/);//$('body').css("overflow","hidden");$('body').on('touchmove', function (event) {//禁止浏览器上下滑动event.preventDefault();});var startX, startY, endX, endY;var showADID = 1;document.getElementById("goodsdetil").addEventListener("touchstart", touchStart, false);document.getElementById("goodsdetil").addEventListener("touchmove", touchMove, false);document.getElementById("goodsdetil").addEventListener("touchend", touchEnd, false);function touchStart(event) {var touch = event.touches[0];startY = touch.pageY;startX = touch.pageX;}function touchMove(event) {var touch = event.touches[0];endX = touch.pageX;//console.log("X轴移动大小：" + (startX - endX));if((startX - endX)<0){$("#goodsdetil").animate({right:(startX - endX)},0);}}function touchEnd(event) {if((startX - endX)>-300){$("#goodsdetil").animate({right:"0px"},300);}else if((startX - endX)<-300){pageHide();}}
}

jQuery 写法


function swipePage(){//页面滑动切换效果//$("#goodsdetil").animate({right:-(e.pageX)}/*,400,function(){$("#goodsMealDiv").empty();}*/);//$('body').css("overflow","hidden");$('body').on('touchmove', function (event) {//禁止浏览器上下滑动event.preventDefault();});var startX, startY, endX, endY;$("#goodsdetil").bind("touchstart", touchStart);$("#goodsdetil").bind("touchmove", touchMove);$("#goodsdetil").bind("touchend", touchEnd);function touchStart(event) {var touch = event.originalEvent.targetTouches[0];startY = touch.pageY;startX = touch.pageX;}function touchMove(event) {var touch = event.originalEvent.targetTouches[0];endX = touch.pageX;//console.log("X轴移动大小：" + (startX - endX));if((startX - endX)<0){$("#goodsdetil").animate({right:(startX - endX)},0);}}function touchEnd(event) {if((startX - endX)>-300){$("#goodsdetil").animate({right:"0px"},300);}else if((startX - endX)<-300){pageHide();}}
}

touchstart ,touchmove, touchend 页面随手指滑动相关推荐

移动端事件touchstart touchmove touchend 动画事件过渡事件
在移动端新增了touch事件,因为手指的行为叫做"触摸", 鼠标的行为叫做"点击" 但是它仍然支持点击事件,有300ms的延迟,检测是否双击移动端的三个事件 ...
JavaScript touch 事件 touchstart touchmove touchend
JavaScript touch 事件 touchstart touchmove touchend MDN 官方文档: https://developer.mozilla.org/en-US/docs ...
移动端的touchstart,touchmove,touchend事件中的获取当前touch位置
前提:touchstart,touchmove,touchend这三个事件可以通过原生和jq绑定. 原生:document.querySelector("#aa").addEven ...
关于touch事件的使用（touchStart touchMove touchEnd（不触发 android 4.0以上））滑动的使用
最近在移动端使用touch事件的时候,遇到了一些问题 ,下面是一些心得, 手机端经常会有有一些上拉加载,下拉刷新, 左右滑动删除的应用场景, 在不借助第三方插件的时候,无疑会用到touch事件,在谷歌 ...
touchstart, touchmove, touchend, mousedown, mousemove, mouseup, 手机端和pc端点击及触摸事件
touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发. touchmove事件:当手指在屏幕上滑动的时候连续地触发.在这个事件发生期间,调用preventDefaul ...
Vue 绑定使用 touchstart touchmove touchend
今天要做一个页面div长按后触发事件,简单学习后实现如下: 先看代码: <template><div><div class="test" @touch ...
移动web JavaScript,事件(touchstart,touchmove,touchend)
demo(认识点击时间差).html: <!DOCTYPE html> <html lang="en"> <head><meta name ...
移动端事件（touchstart+touchmove+touchend）
移动端事件有哪些: 触摸事件手势事件传感器事件 (后面两个兼容性不怎么样,因此重点就是触摸事件) 触摸事件: touch 事件 pointer 事件 (PC端可能会使用jQuery做动画,移动端一 ...
html5手指滑动图片放大缩小,移动端如何实现图片通过捏合手势放大缩小呢？
/* * @Author 兔爷 * @function 实现单指拖动图片,双指缩放图片 * @marks 参数one是为了区分屏幕上现在是一根手指还是两根手指,因为在滑动的时候两根手指先离开一根会触发 ...

touchstart ,touchmove, touchend 页面随手指滑动

touchstart ,touchmove, touchend 页面随手指滑动相关推荐

最新文章

热门文章