JavaScript移动端水平滑动删除代码实例

当前位置：首页 > 代码实例 > html5 css3代码分类 > 其他 > JavaScript移动端水平滑动删除代码实例

分享一段代码实例，它是比较常见的移动端的操作。
水平向左滑动就可以删除元素，需要的朋友可以做一下参考。

代码实例如下:

[ 其他 ] 运行代码下载代码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>向左滑动删除</title>
<script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.js'></script>
<style>
.main01 {
  width: 100%;
  height: auto;
  margin: 0 auto;
  overflow: hidden;
}
.main01 ul li {
  position: relative;
  width: 100%;
  height: 3rem;
  line-height: 3rem;
  border-bottom: 1px solid #efefef;
  font-size: 1.3rem;
  -webkit-transform: translateX(0px);
}
.txt {
  padding-left: 1rem;
  width: 100%;
  box-sizing: border-box;
}
.del {
  position: absolute;
  top: 0;
  right: -4rem;
  width: 4rem;
  line-height: 3rem;
  height: 3rem;
  background: #F00;
  color: #FFF;
  text-align: center;
}
#more {
  text-align: center;
  line-height: 3rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
#more a {
  width: 5rem;
  height: 3rem;
  line-height: 3rem;
  color: #FFF;
  background: #0C6;
  text-align: center;
  font-size: 1.3rem;
  display: inline-block;
}
</style>
</head>
<body>
<div class="main01" id="hdlist">
  <ul>
    <li class="list-li"><div class="txt">向左滑动删除</div><div class="del">删除</div></li>
    <li class="list-li"><div class="txt">向左滑动删除</div><div class="del">删除</div></li>
    <li class="list-li"><div class="txt">向左滑动删除</div><div class="del">删除</div></li>
    <li class="list-li" style="display:none"><div class="txt">向左滑动删除</div><div class="del">删除</div></li>
    <li style="display:none"><div class="txt">向左滑动删除</div><div class="del">删除</div></li>
  </ul>
</div>
</body>
<script>
window.addEventListener('load', function() {
  var initX; //触摸位置
  var moveX; //滑动时的位置
  var X = 0; //移动距离
  var objX = 0; //目标对象位置
  document.getElementById("hdlist").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) {
      document.getElementById("hdlist").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 > 50) {
              l = 50;
              obj.style.WebkitTransform = "translateX(" + -l + "px)";
            }
          }
        }
      });
    } else if (objX < 0) {
      document.getElementById("hdlist").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 = -50 + 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(" + -50 + "px)";
          }
        }
      });
    }
  
  })
  document.getElementById("hdlist").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 > -50) {
        obj.style.WebkitTransform = "translateX(" + 0 + "px)";
        objX = 0;
      } else {
        obj.style.WebkitTransform = "translateX(" + -50 + "px)";
        objX = -50;
      }
    }
  })
})
</script>
</html>

代码描述：JavaScript 移动端水平滑动删除代码实例。JavaScript移动端水平滑动删除代码实例

下载全部收藏

154 205

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册