常见问题当前位置:星鸿娱乐 > 常见问题 > >

星鸿娱乐:jq实现左滑显示删除按钮,点击删除实

  

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

  

效果图  

  

  

  

第一步:加载  

  
  
  
  
  

第二步:html  
  

  
  
  
  
  
    
  
  

  小黄人  

  

  小黄人小黄人小黄人小黄人  

  
    删除  
  
  
    
  
  

  小黄人  

  

  小黄人小黄人小黄人小黄人  

  
    删除  
  
  
  

第二步: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  
  

  
  
  $(".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');  });  
  
  

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

  

(责任编辑:admin)

上一篇:jquery实现顶部向右伸缩的导航区域代码

下一篇:星鸿娱乐平台:js钢琴按钮波浪式图片排列效果代

推荐内容

客户服务热线

400 888 8932

在线客服