h5 上 删除 交互_写一个js向左滑动删除 交互特效的插件 删除事件怎么添加...

展开全部

使用了h5的touchmove等事件，以及用js动态改变css3的translate属性来达到动画效果：

html5向左滑动删除特效

* {

padding: 0;

margin: 0;

list-style: none;

}

header {

background: #f7483b;

border-bottom: 1px solid #ccc

}

header h2 {

text-align: center;

line-height: 54px;

font-size: 16px;

color: #fff

}

.list-ul {

overflow: hidden

}

.list-li {

line-height: 60px;

border-bottom: 1px solid #fcfcfc;

position: relative;

padding: 0 12px;

color: #666;

background: #f2f2f2;

-webkit-transform: translateX(0px);

}

.btn {

position: absolute;

top: 0;

right: -80px;

text-align: center;

background: #ffcb20;

color: #fff;

width: 80px