jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2245字，纯文字阅读大概需要4分钟。

内容图文

效果图

第一步：加载

<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>

以上这篇jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

内容总结

以上是互联网集市为您收集整理的jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)全部内容，希望文章能够帮你解决jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端