<!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){
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;
}
}
});
}
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>