jq实现左滑显示删除按钮，点击删除实现删除数据

来源：互联网发布：万能搞笑证件制作软件编辑：程序博客网时间：2024/06/05 20:10

效果图

这里写图片描述

第一步：加载

<script src="js/jquery.min.js"></script><script src="js/jquery.mobile-1.3.2.min.js"></script>

第二步：html

        <div class="item-wrap">    <div class="item clearfix">        <div class="img-item">            <img src="images/icon.png">        </div>        <div class="txt-item">            <p class="name">                 小黄人            </p>            <p class="txt">                小黄人小黄人小黄人小黄人            </p>        </div>        <i class="arrow"></i>        <a class="delect-btn">删除</a>    </div>    <div class="item  clearfix">        <div class="img-item">            <img src="images/icon.png">        </div>        <div class="txt-item">            <p class="name">                 小黄人            </p>            <p class="txt">                小黄人小黄人小黄人小黄人            </p>        </div>        <i class="arrow"></i>        <a class="delect-btn">删除</a>    </div></div>

第二步：css

.item-wrap{    overflow: hidden; } .item-wrap .item{    border-bottom: 1px #fff solid;    background: #000;    width: 125%;    overflow: hidden;    position: relative;    display: -webkit-box;    -webkit-transition: all 0.3s linear; } .item-wrap .item .img-item{    width: 50px;     height: 50px;    margin: 10px; } .item-wrap .item .img-item img{    width: 100%;    border-radius: 50%; } .item-wrap .item .txt-item{    padding-top: 10px;    margin-right:25px;    font-size: 14px;    line-height: 24px;    color: #fff;    -webkit-box-flex:1; }.item-wrap .item .arrow{    width: 0;    height: 0;    line-height: 0;    font-size: 0;    border-style: solid;    border-color: transparent  transparent transparent #fff;    border-width: 8px 0px 8px 8px;    position: absolute;    right: 22%;    top: 50%;    margin-top: -8px;}.delect-btn{    width: 20%;    margin-left: 15px;    color: #fff;    background: #0f0;    z-index:999;    display: block;    text-align: center;    padding-top: 5%;}.item-wrap .selected{    -webkit-transform: translate(-16%);    -webkit-transition: all 0.3s linear;}

第二步：jq

<script>    $(".item").on('swipeleft', function(event) {        event.preventDefault();        /* Act on the event */        $(this).addClass('selected').siblings('.item').removeClass('selected');        $(this).find('.delect-btn').on('click', function(event) {            event.preventDefault();            /* Act on the event */            $(this).parent(".item").animate({                height: 0,                width: 0},                300, function() {                /* stuff to do after animation is complete */                $(this).remove();            });        });    });    $(".item").on('swiperight', function(event) {        event.preventDefault();        /* Act on the event */        $(this).removeClass('selected');    });</script>

0 0