zoukankan      html  css  js  c++  java
  • 移动端滑动效果

      //滑动
      //创建全局初始值
    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="匿名图片">`) } } } })
  • 相关阅读:
    Gitbook
    Docker命令
    sd
    文本三剑客
    2017.4.12下午
    2017.4.11下午
    2017.4.11上午
    2017.4.10下午
    2017.4.10上午
    2017.4.7下午
  • 原文地址:https://www.cnblogs.com/ryze/p/ryze14.html
Copyright © 2011-2022 走看看