标签：删除 html5 css3 测动删除 transition
<!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">
<h5>腾讯新闻</h5>
<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">
<h5>腾讯新闻</h5>
<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">
<h5>腾讯新闻</h5>
<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">
<h5>腾讯新闻</h5>
<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">
<h5>腾讯新闻</h5>
<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">
<h5>腾讯新闻</h5>
<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">
<h5>腾讯新闻</h5>
<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">
<h5>腾讯新闻</h5>
<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">
<h5>腾讯新闻</h5>
<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">
<h5>腾讯新闻</h5>
<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">
<h5>腾讯新闻</h5>
<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>本文出自 “我就是标准” 博客，请务必保留此出处http://liumanwei.blog.51cto.com/3005291/1535867
标签：删除 html5 css3 测动删除 transition
原文地址：http://liumanwei.blog.51cto.com/3005291/1535867
