JS左划出现删除按钮，右滑隐藏的完整案例

日期：2020-06-25 栏目：前端经验浏览：次
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>左划出现删除按钮，右滑隐藏</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
    // 设定每一行的宽度=屏幕宽度+按钮宽度
    $(".line-scroll-wrapper").width($(".line-wrapper").width() + $(".line-btn-delete").width());
    // 设定常规信息区域宽度=屏幕宽度
    $(".line-normal-wrapper").width($(".line-wrapper").width());
    // 设定文字部分宽度（为了实现文字过长时在末尾显示...）
    $(".line-normal-msg").width($(".line-normal-wrapper").width() - 280);
    // 获取所有行，对每一行设置监听
    var lines = $(".line-normal-wrapper");
    var len = lines.length; 
    var lastX, lastXForMobile;
    // 用于记录被按下的对象
    var pressedObj;  // 当前左滑的对象
    var lastLeftObj; // 上一个左滑的对象
    // 用于记录按下的点
    var start;
    // 网页在移动端运行时的监听
    for (var i = 0; i < len; ++i) {
        lines[i].addEventListener('touchstart', function(e){
            lastXForMobile = e.changedTouches[0].pageX;
            pressedObj = this; // 记录被按下的对象 
            // 记录开始按下时的点
            var touches = event.touches[0];
            start = { 
                x: touches.pageX, // 横坐标
                y: touches.pageY  // 纵坐标
            };
        });
        lines[i].addEventListener('touchmove',function(e){
            // 计算划动过程中x和y的变化量
            var touches = event.touches[0];
            delta = {
                x: touches.pageX - start.x,
                y: touches.pageY - start.y
            };
            // 横向位移大于纵向位移，阻止纵向滚动
            if (Math.abs(delta.x) > Math.abs(delta.y)) {
                event.preventDefault();
            }
        });
        lines[i].addEventListener('touchend', function(e){
            if (lastLeftObj && pressedObj != lastLeftObj) { // 点击除当前左滑对象之外的任意其他位置
                $(lastLeftObj).animate({marginLeft:"0"}, 500); // 右滑
                lastLeftObj = null; // 清空上一个左滑的对象
            }
            var diffX = e.changedTouches[0].pageX - lastXForMobile;
            if (diffX < -150) {
                $(pressedObj).animate({marginLeft:"-132px"}, 500); // 左滑
                lastLeftObj && lastLeftObj != pressedObj && 
                    $(lastLeftObj).animate({marginLeft:"0"}, 500); // 已经左滑状态的按钮右滑
                lastLeftObj = pressedObj; // 记录上一个左滑的对象
            } else if (diffX > 150) {
              if (pressedObj == lastLeftObj) {
                $(pressedObj).animate({marginLeft:"0"}, 500); // 右滑
                lastLeftObj = null; // 清空上一个左滑的对象
              }
            }
        });
    }
    // 网页在PC浏览器中运行时的监听
    for (var i = 0; i < len; ++i) {
        $(lines[i]).bind('mousedown', function(e){
            lastX = e.clientX;
            pressedObj = this; // 记录被按下的对象
        });
        $(lines[i]).bind('mouseup', function(e){
            if (lastLeftObj && pressedObj != lastLeftObj) { // 点击除当前左滑对象之外的任意其他位置
                $(lastLeftObj).animate({marginLeft:"0"}, 500); // 右滑
                lastLeftObj = null; // 清空上一个左滑的对象
            }
            var diffX = e.clientX - lastX;
            if (diffX < -150) {
                $(pressedObj).animate({marginLeft:"-132px"}, 500); // 左滑
                lastLeftObj && lastLeftObj != pressedObj && 
                    $(lastLeftObj).animate({marginLeft:"0"}, 500); // 已经左滑状态的按钮右滑
                lastLeftObj = pressedObj; // 记录上一个左滑的对象
            } else if (diffX > 150) {
              if (pressedObj == lastLeftObj) {
                $(pressedObj).animate({marginLeft:"0"}, 500); // 右滑
                lastLeftObj = null; // 清空上一个左滑的对象
              }
            }
        });
    }
});
</script>
<script>
    window.onload = function(){
      $(".line-btn-delete button").click(function(){
            $(this).parent().parent().parent().remove();
      });
    };
</script>
<style type="text/css">
* {
	margin:0;
	padding:0;
}
.line-wrapper {
	width:100%;
	height:144px;
	overflow:hidden;
	font-size:28px;
	border-bottom:1px solid #aaa;
}
.line-scroll-wrapper {
	white-space:nowrap;
	height:144px;
	clear:both;
}
.line-btn-delete {
	float:left;
	width:132px;
	height:144px;
}
.line-btn-delete button {
	width:100%;
	height:100%;
	background:#00bc12;
	border:none;
	font-size:24px;
	color:#fff;
}
.line-normal-wrapper {
	display:inline-block;
	line-height:100px;
	float:left;
	padding-top:10px;
	padding-bottom:10px;
}
.line-normal-icon-wrapper {
	float:right;
	width:120px;
	height:120px;
	margin-right:12px;
}
.line-normal-icon-wrapper img {
	width:120px;
}
.line-normal-avatar-wrapper {
	width:100px;
	height:124px;
	float:left;
	margin-left:12px;
}
.line-normal-avatar-wrapper img {
	width:92px;
	height:92px;
}
.line-normal-left-wrapper {
	float:left;
	overflow:hidden;
}
.line-normal-info-wrapper {
	float:left;
	margin-left:10px;
}
.line-normal-user-name {
	height:28px;
	line-height:28px;
	color:#4e4e4e;
	margin-top:7px;
}
.line-normal-msg {
	height:28px;
	line-height:28px;
	overflow:hidden;
	text-overflow:ellipsis;
	color:#4e4e4e;
	margin-top:11px;
}
.line-normal-time {
	height:28px;
	line-height:28px;
	color:#999;
	margin-top:11px;
}
</style>
</head>
<body>
	<div class="line-wrapper">
		<div class="line-scroll-wrapper">
			<div class="line-normal-wrapper">
				<div class="line-normal-left-wrapper">
					<div class="line-normal-avatar-wrapper"> 
						<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2822468059,2673919372&fm=27&gp=0.jpg" />
					</div>
					<div class="line-normal-info-wrapper">
						<div class="line-normal-user-name">
							笨蛋哆啦A梦快点
						</div>
						<div class="line-normal-msg">
							在不快点我就不等你了哦
						</div>
						<div class="line-normal-time">
							1分钟前
						</div> 
					</div>
				</div>
				<div class="line-normal-icon-wrapper">
					<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3746300160,635742787&fm=26&gp=0.jpg" />
				</div>
			</div>
			<div class="line-btn-delete">
				<button>删除</button>
			</div>
		</div>
  	</div>
  	<div class="line-wrapper">
		<div class="line-scroll-wrapper">
			<div class="line-normal-wrapper">
				<div class="line-normal-left-wrapper">
					<div class="line-normal-avatar-wrapper"> 
						<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2822468059,2673919372&fm=27&gp=0.jpg" />
					</div>
					<div class="line-normal-info-wrapper">
						<div class="line-normal-user-name">
							笨蛋哆啦A梦快点
						</div>
						<div class="line-normal-msg">
							在不快点我就不等你了哦
						</div>
						<div class="line-normal-time">
							1分钟前
						</div> 
					</div>
				</div>
				<div class="line-normal-icon-wrapper">
					<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3746300160,635742787&fm=26&gp=0.jpg" />
				</div>
			</div>
			<div class="line-btn-delete">
				<button>删除</button>
			</div>
		</div>
  	</div>
  	<div class="line-wrapper">
		<div class="line-scroll-wrapper">
			<div class="line-normal-wrapper">
				<div class="line-normal-left-wrapper">
					<div class="line-normal-avatar-wrapper"> 
						<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2822468059,2673919372&fm=27&gp=0.jpg" />
					</div>
					<div class="line-normal-info-wrapper">
						<div class="line-normal-user-name">
							笨蛋哆啦A梦快点
						</div>
						<div class="line-normal-msg">
							在不快点我就不等你了哦
						</div>
						<div class="line-normal-time">
							1分钟前
						</div> 
					</div>
				</div>
				<div class="line-normal-icon-wrapper">
					<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3746300160,635742787&fm=26&gp=0.jpg" />
				</div>
			</div>
			<div class="line-btn-delete">
				<button>删除</button>
			</div>
		</div>
  	</div>
  	<div class="line-wrapper">
		<div class="line-scroll-wrapper">
			<div class="line-normal-wrapper">
				<div class="line-normal-left-wrapper">
					<div class="line-normal-avatar-wrapper"> 
						<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2822468059,2673919372&fm=27&gp=0.jpg" />
					</div>
					<div class="line-normal-info-wrapper">
						<div class="line-normal-user-name">
							笨蛋哆啦A梦快点
						</div>
						<div class="line-normal-msg">
							在不快点我就不等你了哦
						</div>
						<div class="line-normal-time">
							1分钟前
						</div> 
					</div>
				</div>
				<div class="line-normal-icon-wrapper">
					<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3746300160,635742787&fm=26&gp=0.jpg" />
				</div>
			</div>
			<div class="line-btn-delete">
				<button>删除</button>
			</div>
		</div>
  	</div>
</body>
</html>
转载注明出处：http://www.duanlonglong.com/qdjy/242.html
JS左划出现删除按钮，右滑隐藏的完整案例

相关推荐
