H5左侧滑删除简单实现

 

实现功能

在一个列表的一条中,往左滑动时,右边出现删除按钮,点击可删除这一条

实现办法

列表中一项为父div,其中包含内容div和删除按钮span 父div相对定位,设置宽度.内容div宽度与父div宽度一样.内容和按钮都绝对定位,并且内容zindex在按钮之上 这样,就将按钮遮住了.然后在内容上绑定touchstart和touchmove事件.计算坐标的移动判断出是左还是右. 根据左和右来改变内容的left值.当内容的left值向左移动一段距离,那么删除按钮就露出来了.可将这段距离设为 删除按钮的宽度.当内容向右移动时,再将left值设为0.这样就实现了.

---

点击绿色查看效果

第一条

删除

 

 

CSS:

  .moveleft{
            transform:translateX(-50px);/*改变位置时,可以添加或删除这个C3类.效果是水平移动50像素.正负表示方向*/
        }
        .itembox {
            position:relative;/*父DIV相对定位*/
            width: 400px;/*要设置宽度*/
            font-size:16px;
        }
        .itemcont {
            z-index:1;/*内容层在按钮上*/
            position:absolute;/*绝对定位*/
            width: 400px;/*与父DIV宽度一样*/
            height: 34px;
            line-height: 34px;
            background-color:green;
        }

        .itemdelbtn {
            position:absolute;/*绝对定位*/
            right:0;top:0;/*在最右边*/
            display: inline-block;
            width: 50px;
            height: 34px;
            text-align: center;
            line-height: 34px;
            background-color: red;
        }

View Code