移动端滑动效果

  //滑动
  //创建全局初始值
var X = 0 , y = 0 , startX = 0 , startY = 0 ;
  //touchstart事件记录初始位置 $(
'.M_imgs').on('touchstart',function(e){ if ($(e.target).attr('src')) { X = 0 ; y = 0 ; startX = 0 ; startY = 0 ; startX = e.originalEvent.changedTouches[0].pageX; startY = e.originalEvent.changedTouches[0].pageY; } }).on('touchmove',function(e){
    //touchmove事件记录移动距离并算出向左右移动
if ($(e.target).attr('src')) { moveEndX = e.originalEvent.changedTouches[0].pageX; moveEndY = e.originalEvent.changedTouches[0].pageY; X = X + moveEndX - startX; y = y + moveEndY - startY; } }).on('touchend',function(e){
    //touchend事件,根据移动的判断来进行移动如果想要手指移动图片跟随移动的效果可以在touchmove中进行距离的判断
if ($(e.target).attr('src')) { if (y !== 0){ }else if(y == 0){ if ($(e.target).attr('src')) { $('.img-modal ').fadeIn(500); $('.img-modal ').css({display:'flex'}); $('.img-modal .modalImgBox').html(`<img width="100%" src="${$(e.target).attr('src')}" alt="匿名图片">`) } } } })
原文地址:https://www.cnblogs.com/ryze/p/ryze14.html