<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes">
<title>TOUCH</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
-webkit-user-select: none;
}
body, button{
font-family:'Microsoft YaHei', arial, helvetica, sans-serif;
}
.wrap{
position: relative;
height: 60px;
border-bottom: 1px solid #ccc;
}
.container{
position: relative;
z-index: 2;
width: 100%;
height: 60px;
display: -webkit-box;
background-color: #FFF;
}
.trans{
-webkit-transition: margin-left 0.2s linear;
transition: margin-left 0.2s linear;
}
.head-img{
width: 40px;
height: 40px;
line-height: 40px;
background-color: #99F;
border-radius: 3px;
margin: 10px 0 0 10px;
text-align: center;
font-size: 12px;
color: #FFF;
}
.content{
margin: 10px 0 0 5px;
-webkit-box-flex: 1;
}
.content p{
font-size: 12px;
color: #999;
margin-top: 5px;
}
.del-btn{
position: absolute;
right: 0;
top: 0;
z-index: 1;
width: 60px;
height: 60px;
line-height: 60px;
background-color: #F00;
color: #FFF;
border: 0;
font-size: 14px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="container">
<p class="head-img">图片</p>
<div class="content">
<h6>腾讯新闻</h6>
<p>云南鲁甸强震已致379人遇难</p>
</div>
</div>
<button class="del-btn">删除</button>
</div>
<div class="wrap">
<div class="container">
<p class="head-img">图片</p>
<div class="content">
<h6>腾讯新闻</h6>
<p>云南鲁甸强震已致379人遇难</p>
</div>
</div>
<button class="del-btn">删除</button>
</div>
<div class="wrap">
<div class="container">
<p class="head-img">图片</p>
<div class="content">
<h6>腾讯新闻</h6>
<p>云南鲁甸强震已致379人遇难</p>
</div>
</div>
<button class="del-btn">删除</button>
</div>
<div class="wrap">
<div class="container">
<p class="head-img">图片</p>
<div class="content">
<h6>腾讯新闻</h6>
<p>云南鲁甸强震已致379人遇难</p>
</div>
</div>
<button class="del-btn">删除</button>
</div>
<div class="wrap">
<div class="container">
<p class="head-img">图片</p>
<div class="content">
<h6>腾讯新闻</h6>
<p>云南鲁甸强震已致379人遇难</p>
</div>
</div>
<button class="del-btn">删除</button>
</div>
<div class="wrap">
<div class="container">
<p class="head-img">图片</p>
<div class="content">
<h6>腾讯新闻</h6>
<p>云南鲁甸强震已致379人遇难</p>
</div>
</div>
<button class="del-btn">删除</button>
</div>
<div class="wrap">
<div class="container">
<p class="head-img">图片</p>
<div class="content">
<h6>腾讯新闻</h6>
<p>云南鲁甸强震已致379人遇难</p>
</div>
</div>
<button class="del-btn">删除</button>
</div>
<div class="wrap">
<div class="container">
<p class="head-img">图片</p>
<div class="content">
<h6>腾讯新闻</h6>
<p>云南鲁甸强震已致379人遇难</p>
</div>
</div>
<button class="del-btn">删除</button>
</div>
<div class="wrap">
<div class="container">
<p class="head-img">图片</p>
<div class="content">
<h6>腾讯新闻</h6>
<p>云南鲁甸强震已致379人遇难</p>
</div>
</div>
<button class="del-btn">删除</button>
</div>
<div class="wrap">
<div class="container">
<p class="head-img">图片</p>
<div class="content">
<h6>腾讯新闻</h6>
<p>云南鲁甸强震已致379人遇难</p>
</div>
</div>
<button class="del-btn">删除</button>
</div>
<div class="wrap">
<div class="container">
<p class="head-img">图片</p>
<div class="content">
<h6>腾讯新闻</h6>
<p>云南鲁甸强震已致379人遇难</p>
</div>
</div>
<button class="del-btn">删除</button>
</div>
<script type="text/javascript">
var startPos = 0,
endPos = 0,
parent = null;
document.body.addEventListener('click', function(e) {
e.stopPropagation();
e.preventDefault();
var target = e.target;
if(target.className.indexOf('del-btn') > -1) {
alert('点击了删除');
}
}, false);
document.body.addEventListener('touchstart', function(e) {
parent = e.target;
while(parent && parent.className.indexOf('container') < 0) {
parent = parent.parentNode;
}
var touch = e.touches[0];
startPos = touch.pageX;
parent.className = 'container';
}, false);
document.body.addEventListener('touchmove', function(e) {
var touch = e.touches[0],
offset = 0;
if(parent.className != 'container') {
return;
}
endPos = touch.pageX;
offset = endPos - startPos;
if(offset > 0) {
offset = 0;
if(parent.className.length > 0) {
parent.className = parent.className + ' trans';
} else {
parent.className = 'trans';
}
} else if(Math.abs(offset) > 60) {
offset = -60;
}
parent.style.marginLeft = offset + 'px';
}, false);
document.body.addEventListener('touchend', function(e) {
var offset = 0;
if(parent.className != 'container') {
return;
}
offset = endPos - startPos;
if(offset < 0 && Math.abs(offset) > 30) {
offset = -60;
} else {
offset = 0;
}
if(parent.className.length > 0) {
parent.className = parent.className + ' trans';
} else {
parent.className = 'trans';
}
parent.style.marginLeft = offset + 'px';
}, false);
</script>
</body>
</html>免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
