index

最新推荐文章于 2024-04-28 15:02:34 发布
最新推荐文章于 2024-04-28 15:02:34 发布
阅读量267 收藏
点赞数

左划出现删除按钮，右滑隐藏

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>左划出现删除按钮，右滑隐藏</title>

    <script type="text/javascript" src="jquery-1.11.3.js"></script>

    <script type="text/javascript">

        $(document).ready(function(e) {

            // 设定每一行的宽度=屏幕宽度+按钮宽度

            $(".line-scroll-wrapper").width($(".line-wrapper").width() + $(".line-btn-delete").width());

            // 设定常规信息区域宽度=屏幕宽度

            $(".line-normal-wrapper").width($(".line-wrapper").width());

            // 设定文字部分宽度（为了实现文字过长时在末尾显示...）

            $(".line-normal-msg").width($(".line-normal-wrapper").width() - 280);



            // 获取所有行，对每一行设置监听

            var lines = $(".line-normal-wrapper");

            var len = lines.length;

            var lastX, lastXForMobile;



            // 用于记录被按下的对象

            var pressedObj;  // 当前左滑的对象

            var lastLeftObj; // 上一个左滑的对象



            // 用于记录按下的点

            var start;



            // 网页在移动端运行时的监听

            for (var i = 0; i < len; ++i) {

                lines[i].addEventListener('touchstart', function(e){

                    lastXForMobile = e.changedTouches[0].pageX;

                    pressedObj = this; // 记录被按下的对象



                    // 记录开始按下时的点

                    var touches = event.touches[0];

                    start = {

                        x: touches.pageX, // 横坐标

                        y: touches.pageY  // 纵坐标

                    };

                });



                lines[i].addEventListener('touchmove',function(e){

                    // 计算划动过程中x和y的变化量

                    var touches = event.touches[0];

                    delta = {

                        x: touches.pageX - start.x,

                        y: touches.pageY - start.y

                    };

                    // 横向位移大于纵向位移，阻止纵向滚动

                    if (Math.abs(delta.x) > Math.abs(delta.y)) {

                        event.preventDefault();

                    }

                });



                lines[i].addEventListener('touchend', function(e){

                    if (lastLeftObj && pressedObj != lastLeftObj) { // 点击除当前左滑对象之外的任意其他位置

                        $(lastLeftObj).animate({marginLeft:"0"}, 500); // 右滑

                        lastLeftObj = null; // 清空上一个左滑的对象

                    }

                    var diffX = e.changedTouches[0].pageX - lastXForMobile;

                    if (diffX < -150) {

                        $(pressedObj).animate({marginLeft:"-132px"}, 500); // 左滑

                        lastLeftObj && lastLeftObj != pressedObj &&

                        $(lastLeftObj).animate({marginLeft:"0"}, 500); // 已经左滑状态的按钮右滑

                        lastLeftObj = pressedObj; // 记录上一个左滑的对象

                    } else if (diffX > 150) {

                        if (pressedObj == lastLeftObj) {

                            $(pressedObj).animate({marginLeft:"0"}, 500); // 右滑

                            lastLeftObj = null; // 清空上一个左滑的对象

                        }

                    }

                });

            }



            // 网页在PC浏览器中运行时的监听

            for (var i = 0; i < len; ++i) {

                $(lines[i]).bind('mousedown', function(e){

                    lastX = e.clientX;

                    pressedObj = this; // 记录被按下的对象

                });



                $(lines[i]).bind('mouseup', function(e){

                    if (lastLeftObj && pressedObj != lastLeftObj) { // 点击除当前左滑对象之外的任意其他位置

                        $(lastLeftObj).animate({marginLeft:"0"}, 500); // 右滑

                        lastLeftObj = null; // 清空上一个左滑的对象

                    }

                    var diffX = e.clientX - lastX;

                    if (diffX < -150) {

                        $(pressedObj).animate({marginLeft:"-132px"}, 500); // 左滑

                        lastLeftObj && lastLeftObj != pressedObj &&

                        $(lastLeftObj).animate({marginLeft:"0"}, 500); // 已经左滑状态的按钮右滑

                        lastLeftObj = pressedObj; // 记录上一个左滑的对象

                    } else if (diffX > 150) {

                        if (pressedObj == lastLeftObj) {

                            $(pressedObj).animate({marginLeft:"0"}, 500); // 右滑

                            lastLeftObj = null; // 清空上一个左滑的对象

                        }

                    }

                });

            }

        });

    </script>

    <style type="text/css">

        * { margin: 0; padding: 0; }

        .line-wrapper { width: 100%; height: 144px; overflow: hidden; font-size: 28px; border-bottom: 1px solid #aaa; }

        .line-scroll-wrapper { white-space: nowrap; height: 144px; clear: both; }

        .line-btn-delete { float: left; width: 132px; height: 144px; }

        .line-btn-delete button { width: 100%; height: 100%; background: red; border: none; font-size: 24px; font-family: 'Microsoft Yahei'; color: #fff; }

        .line-normal-wrapper { display: inline-block; line-height: 100px; float: left; padding-top: 10px; padding-bottom: 10px; }

        .line-normal-left-wrapper { float: left; overflow: hidden; }

        .line-normal-info-wrapper { float: left; margin-left: 10px; }

        .line-normal-user-name { height: 28px; line-height: 28px; color: #4e4e4e; margin-top: 7px; }

        .line-normal-msg { height: 28px; line-height: 28px; overflow:hidden; text-overflow:ellipsis; color: #4e4e4e; margin-top: 11px; }

        .line-normal-time { height: 28px; line-height: 28px; color: #999; margin-top: 11px; }

    </style>

</head>

<body>

<div class="line-wrapper">

    <div class="line-scroll-wrapper">

        <div class="line-normal-wrapper">

            <div class="line-normal-left-wrapper">

                <div class="line-normal-info-wrapper">

                    <div class="line-normal-user-name">蜡笔小新</div>

                    <div class="line-normal-msg">在同行的小伙伴中提到了你</div>

                    <div class="line-normal-time">1分钟前</div>

                </div>

            </div>

        </div>

        <div class="line-btn-delete"><button>删除</button></div>

    </div>

</div>

<div class="line-wrapper">

    <div class="line-scroll-wrapper">

        <div class="line-normal-wrapper">

            <div class="line-normal-left-wrapper">

                <div class="line-normal-info-wrapper">

                    <div class="line-normal-user-name">乔巴</div>

                    <div class="line-normal-msg">你看不到我哦</div>

                    <div class="line-normal-time">1分钟前</div>

                </div>

            </div>

        </div>

        <div class="line-btn-delete"><button>删除</button></div>

    </div>

</div>

<div class="line-wrapper">

    <div class="line-scroll-wrapper">

        <div class="line-normal-wrapper">

            <div class="line-normal-left-wrapper">

                <div class="line-normal-info-wrapper">

                    <div class="line-normal-user-name">贱行贱远</div>

                    <div class="line-normal-msg">回忆里想起模糊的小时候，云朵漂浮在蓝蓝的天空，那时的你说，要和我手牵手，一起走到时间的尽头</div>

                    <div class="line-normal-time">1分钟前</div>

                </div>

            </div>

        </div>

        <div class="line-btn-delete"><button>删除</button></div>

    </div>

</div>

<div class="line-wrapper">

    <div class="line-scroll-wrapper">

        <div class="line-normal-wrapper">

            <div class="line-normal-left-wrapper">

                <div class="line-normal-info-wrapper">

                    <div class="line-normal-user-name">小黄人</div>

                    <div class="line-normal-msg">哈哈哈哈哈……暑假来看小黄人电影哦~哈哈哈……</div>

                    <div class="line-normal-time">1分钟前</div>

                </div>

            </div>

        </div>

        <div class="line-btn-delete"><button>删除</button></div>

    </div>

</div>

</body>

</html>
qq_34354220
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jq实现左滑显示删除按钮，点击删除实现删除数据
Seety_ST的专栏
10-14 5790
效果图第一步：加载<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-i
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
09-01
下面小编就为大家带来一篇jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
基于jQuery的左滑出现删除按钮
Sz_0220的博客
05-20 864
1.成品示例图 下面分别是在PC浏览器里和在Mobile浏览器里的效果。 PC浏览器 手机浏览器     2.实现思路 为了说明我的实现思路，做了两个图来辅助说明。 首先，请看图1。在图中，我们设置每一行的宽度超过浏览器的宽度，其超出的部分就是放置按钮的区域。由于超出了浏览器的最大宽度，因此按钮区域此时是不可见的，只能显
【前端】jQuery移动端左滑删除
ance1569的博客
07-31 233
转载请注明出处：http://www.cnblogs.com/shamoyuu/p/left_slide_menu.html 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 &lt...
Index
11-13
Index
jQuery实现移动端左滑删除功能
彳亍
11-27 4680
在手机移动端，经常需要实现类似微信聊天工具中的左滑动删除和右滑动恢复功能。这里，我们可以直接使用jQuery来实现该效果。基本原理： 利用jQuery中的touchstart、touchmove、touchend、touch事件和animate方法。 条目包裹区块（item_wrap）和里面的条目内容区块（item_top）采用相对定位，删除按钮（item_del）采用绝对定位。 条目内容区块默认是
移动端html5实现列表左滑删除
08-17
移动端html5实现列表左滑删除
基于jQuery的左滑出现删除按钮的示例
12-12
最近在做项目的时候遇到了个需求，在网页上实现类似于QQ会话列表那样子的左滑出现删除按钮的效果，于是尝试着写了一个，写出来与大家交流分享，大神勿喷。 基本要求 由于我们是在做一个跨平台的APP，里面部分界面其实就是WebView加载的网页，因此需要使用网页实现这样的效果：往左滑动时，显示删除按钮，再往右滑，隐藏删除按钮。 成品示例图 额，先上图吧。下面分别是在PC浏览器里和在Mobile浏览器里的效果。 PC浏览器 手机浏览器 实现思路 为了说明我的实现思路，做了两个图来辅助说明。 首先，请看图1。在图中，我们设置每一行的宽度超过浏览器的宽度，其超出的部分就是放置按钮的区域。由于超出了浏览
H5实现安卓的左滑删除
06-25
点击显示删除以外的地方自动滑动隐藏掉左滑按钮，js里有关闭方法，可用做点击返回按钮隐藏左滑的按钮。效果https://blog.csdn.net/qq_34950354/article/details/80797057
左滑删除html5
10-20
web或手机端 仿苹果侧滑删除的html代码，可以完美实现
向左滑动删除列表，动态添加列表
12-01
插件描述：向左滑动删除列表，动态添加列表。 参考示例：http://www.jq22.com/jquery-info4903
原生js实现H5侧滑删除的功能
10-20
原生js实现H5侧滑删除的功能。原生js实现H5侧滑删除的功能
精致的H5 列表侧滑组件。H5页面侧滑删除、修改的功能组件。
01-26
精致的H5 列表侧滑组件。H5页面侧滑删除、修改的功能效果实现！精致的H5 列表侧滑组件。H5页面侧滑删除、修改的功能效果实现！
h5页面左滑删除
weixin_34112900的博客
05-29 1631
小程序购物车左滑删除功能 左滑删除这个效果在移动端购物车页面都会用到，近期项目需要这个功能，我发现小程序本身并没有提供这个功能，所以只好自己动手，实现这个左滑删除的效果了。 类似QQ侧滑删除功能 1.横向左侧滑删除按钮显示,右侧滑删除按钮隐藏; 2.众向滑动页面,不触发滑动删除; 3.当前删除按钮显示后,禁止可在左滑动,只允许右滑动隐藏按钮; 4.删除按钮显示后,触发其他项左侧删除时,隐藏上次删除...
jquery左划出现删除按钮，右滑隐藏
weixin_30512043的博客
10-16 118
jquery左侧划出显示删除按钮，右滑动隐藏删除按钮 <!doctype html> <html> <head> <meta charset="utf-8"> <title>左划出现删除按钮，右滑隐藏</title> <script ...
仿QQ左滑显示删除按钮
Myan_的博客
10-03 389
效果演示 废话不多说，直接看效果： HTML结构分析 <html> <head> <meta charset="UTF-8"> <title>仿qq左滑删除列表效果</title> <meta name="viewport" content="width=device-width, initial-scale=1,maxim...
h5+Vant左滑删除
最新发布
m0_58361435的博客
04-28 557
介绍：这是一个上拉加载下拉刷新的列表，外加左滑删除。废话不多说，直接上代码！
zepto实现h5左滑显示删除按钮
weixin_30299539的博客
12-19 276
这个一直报错：on() is not a function 不知道是为何，代码如下： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" id="viewport" ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值