jquery制作移动端菜单栏左右滑动

Posted 精灵小公主

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery制作移动端菜单栏左右滑动相关的知识,希望对你有一定的参考价值。

//菜单栏滑动
function move_scollX(){
var startPosition, endPosition, distanceX,distanceY;
$(".left").bind(‘touchstart‘, function(e){ 
  var touch = e.originalEvent.changedTouches[0]; //移动端
  startPosition = {
    x: touch.pageX,
    y:touch.pageY
  }
}) .bind(‘touchmove‘, function(e){

  var touch = e.originalEvent.changedTouches[0]; //移动端
  endPosition = {
    x: touch.pageX,

    y:touch.pageY

}; 

distanceX = endPosition.x - startPosition.x;

distanceY = endPosition.Y - startPosition.Y; 
if(distanceX < 0) { // 向左移动
  $(this).css({"left":distanceX});
} else if (distanceX > 0) { // 向右移动
  $(this).css({"left":distance});
}
}
}
}).bind(‘touchend‘, function(e){ //放开事件
  $(this).animate({"left":-width},100);
}
});
}

以上是关于jquery制作移动端菜单栏左右滑动的主要内容,如果未能解决你的问题,请参考以下文章

移动端手指操控左右滑动的菜单

左右两侧滑动的安卓滑动菜单

js判断移动端手势 上下左右滑动事件

移动端轮播图左右滑动页面会抖是啥原因

H5移动端禁止页面左右滑动

移动端触屏 也就H5页面 左右滑动 返回上一页?