开发者社区> 问答> 正文

有大神有空吗?帮看一下问题!在滑动第二个目标的时候上个目标为什么没有回位?谢谢

screenshot

var initX; //触摸位置
var moveX; //滑动时的位置
var X = 0; //移动距离
var objX = 0; //目标对象位置
window.addEventListener('touchstart', function(event) {
  event.preventDefault();
  var obj = event.target.parentNode;
  if (obj.className == "list-li") {
    initX = event.targetTouches[0].pageX;
    objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1;
  }
  if (objX == 0) {
    window.addEventListener('touchmove', function(event) {
      event.preventDefault();
      var obj = event.target.parentNode;
      if (obj.className == "list-li") {
        moveX = event.targetTouches[0].pageX;
        X = moveX - initX;
        if (X >= 0) {
          obj.style.WebkitTransform = "translateX(" + 0 + "px)";
        } else if (X < 0) {
          var l = Math.abs(X);
          obj.style.WebkitTransform = "translateX(" + -l + "px)";
          if (l > 80) {
            l = 80;
            obj.style.WebkitTransform = "translateX(" + -l + "px)";
          }
        }
      }
    });
  } else if (objX < 0) {
    window.addEventListener('touchmove', function(event) {
      event.preventDefault();
      var obj = event.target.parentNode;
      if (obj.className == "list-li") {
        moveX = event.targetTouches[0].pageX;
        X = moveX - initX;
        if (X >= 0) {
          var r = -80 + Math.abs(X);
          obj.style.WebkitTransform = "translateX(" + r + "px)";
          if (r > 0) {
            r = 0;
            obj.style.WebkitTransform = "translateX(" + r + "px)";
          }
        } else { //向左滑动
          obj.style.WebkitTransform = "translateX(" + -80 + "px)";
        }
      }
    });
  }

})
window.addEventListener('touchend', function(event) {
  event.preventDefault();
  var obj = event.target.parentNode;
  if (obj.className == "list-li") {
    objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1;
    if (objX > -40) {
      obj.style.WebkitTransform = "translateX(" + 0 + "px)";
      objX = 0;
    } else {
      obj.style.WebkitTransform = "translateX(" + -80 + "px)";
      objX = -80;
    }
  }
})

screenshot
screenshot
screenshot

展开
收起
杨冬芳 2016-06-13 09:44:11 1925 0
1 条回答
写回答
取消 提交回答
  • IT从业

    建议你扔到codepen jsfiddle 这样的平台上再贴出链接,这样看太费事。

    2019-07-17 19:35:06
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
动态、高效,蚂蚁动态卡片的内核逻辑 立即下载
十分钟上线-使用函数计算构建支付宝小程序服务 立即下载
4个迭代,从批量交...1573957773.pdf 立即下载