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

小咪咪 2022-11-12 02:56 187阅读 0赞

效果图

![5a1532acccf36c6953ff45c4c7c53147.png][]

第一步：加载

第二步：html

![icon.png][]

小黄人

小黄人小黄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

[5a1532acccf36c6953ff45c4c7c53147.png]: /images/20221022/b33b7ef572c843eda9bc532644a15be2.png
[icon.png]:

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 uni-app 实现列表左滑删除按钮

相关 UITableView左滑删除实现

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

相关 android 左滑删除自动恢复,android实现简单左滑删除控件

相关 WPF实现删除功能

相关 jQuery实现移动端左滑删除功能

相关小程序左滑删除功能

相关小程序实现左滑删除功能

相关 mui左滑或右滑显示删除功能

相关 SuperMap iClient for OpenLayers实现在web页面右键图标弹出删除按钮，点击删除按钮可删除图标