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

效果图

第一步：加载

第二步：html

小黄人

小黄人小黄www.cppcns.comss="txt-item">

小黄人

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

删除

第二步：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 .itwww.cppcns.comit-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实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

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

本文地址: http://www.cppcns.com/ruanjian/java/161157.html