一直想写个仿QQ通讯列表左滑删除的效果,今天终于忙里偷闲,简单一个.
大概思路是这样的:
通过
ontouchstart
ontouchmove
ontouchend
结合css3的平移.
不多说,直接上demo,如有错误希望看客老爷雅正.
html:
<div class="contain">
<ul>
<li>
<div id="list" class="list">
<div class="list_lf"><p>列表1</p></div>
<div class="list_rt"><p>删除</p></div>
</div>
</li>
<li>
<div class="list">
<div class="list_lf"><p>列表2</p></div>
<div class="list_rt"><p>删除</p></div>
</div>
</li>
<li>
<div class="list">
<div class="list_lf"><p>列表3</p></div>
<div class="list_rt"><p>删除</p></div>
</div>
</li>
<li>
<div class="list">
<div class="list_lf"><p>列表4</p></div>
<div class="list_rt"><p>删除</p></div>
</div>
</li>
<li>
<div class="list">
<div class="list_lf"><p>列表5</p></div>
<div class="list_rt"><p>删除</p></div>
</div>
</li>
<li>
<div class="list">
<div class="list_lf"><p>列表6</p></div>
<div class="list_rt"><p>删除</p></div>
</div>
</li>
<li>
<div class="list">
<div class="list_lf"><p>列表7</p></div>
<div class="list_rt"><p>删除</p></div>
</div>
</li>
<li>
<div class="list">
<div class="list_lf"><p>列表8</p></div>
<div class="list_rt"><p>删除</p></div>
</div>
</li>
</ul>
</div>
css:
.contain{
width: 200px;
height: 500px;
margin: 100px auto;
border: 1px solid #dcdcdc;
background-color: #f5f5f5;
}
.contain ul {
margin: 0;
padding: 0;
float: left;
list-style: none;
}
.contain ul li{
position: relative;
width: 200px;
height: 50px;
border-bottom: 1px solid #000;
overflow: hidden;
}
.contain ul li .list{
position: absolute;
top: 0;
left: 0;
width: 251px;
height: 100%;
overflow: hidden;
}
.contain ul li .list div{
float: left;
}
.contain ul li .list .list_lf{
width: 200px;
overflow: hidden;
}
.contain ul li .list .list_lf p{
width: 180px;
padding-left: 20px;
}
.contain ul li .list .list_rt{
width: 50px;
border-left: 1px solid #dcdcdc;
text-align: center;
}
js:
var li = document.getElementById('list'),
spirit, startX, startY, x;
// touch start listener
function touchStart(event) {
event.preventDefault();
if (! event.touches.length) return;
var touch = event.touches[0];
startX = touch.pageX;
startY = touch.pageY;
}
// add touch start listener
li.addEventListener("touchstart", touchStart, false);
function touchMove(event) {
event.preventDefault();
if (!event.touches.length) return;
var touch = event.touches[0];
x = touch.pageX - startX;
// y = touch.pageY - startY;
console.log(x);
li.style.webkitTransform = 'translate(' + x + 'px)';
}
li.addEventListener("touchmove", touchMove, false);
function touchEnd(event){
if (x<0&&x>-30) {
li.style.webkitTransform = 'translate(-51px)';
}
if (x<-30) {
li.style.webkitTransform = 'translate(-51px)';
};
if (x>0) {
li.style.webkitTransform = 'translate(0px)';
};
}
li.addEventListener("touchend", touchEnd, false);
等有时间再继续完善..原创,勿转.谢谢