zoukankan      html  css  js  c++  java
  • jq 仿手机qq聊天记录滑动删除

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>左划出现删除按钮,右滑隐藏</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.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 { 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; 132px; height: 144px; }
    .line-btn-delete button { 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-icon-wrapper { float: right; 120px; height: 120px; margin-right: 12px; }
    .line-normal-icon-wrapper img { 120px; height: 120px; }
    .line-normal-avatar-wrapper { 100px; height: 124px; float: left; margin-left: 12px; }
    .line-normal-avatar-wrapper img { 92px; height: 92px; border-radius: 60px; }
    .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-avatar-wrapper"><img src="1.jpg" /></div>
    <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 class="line-normal-icon-wrapper"><img src="5.jpg"/></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-avatar-wrapper"><img src="2.jpg" /></div>
    <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 class="line-normal-icon-wrapper"><img src="6.jpg"/></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-avatar-wrapper"><img src="3.jpg" /></div>
    <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 class="line-normal-icon-wrapper"><img src="7.jpg"/></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-avatar-wrapper"><img src="4.png" /></div>
    <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 class="line-normal-icon-wrapper"><img src="8.jpg"/></div>
    </div>
    <div class="line-btn-delete"><button>删除</button></div>
    </div>
    </div>
    </body>
    </html>

  • 相关阅读:
    C#Note13:如何在C#中调用python
    C# Note12:WPF只允许数字的限制性TextBox
    C# Note11:如何优雅地退出WPF应用程序
    C#读书笔记:线程,任务和同步
    Programming好文解读系列(—)——代码整洁之道
    java算法面试题:从类似如下的文本文件中读取出所有的姓名,并打印出重复的姓名和重复的次数,并按重复次数排序 ;读取docx 读取doc 使用poi 相关jar包提集提供下载
    java面试题:如果一串字符如"aaaabbc中国1512"要分别统计英文字符的数量,中文字符的数量,和数字字符的数量,假设字符中没有中文字符、英文字符、数字字符之外的其他特殊字符。
    java算法面试题:有一个字符串,其中包含中文字符、英文字符和数字字符,请统计和打印出各个字符的个数 按值的降序排序,如果值相同则按键值的字母顺序
    java算法面试题:编写一个截取字符串的函数,输入为一个字符串和字节数,输出为按字节截取的字符串,但要保证汉字不被截取半个, 如“我ABC”,4,应该截取“我AB”,输入“我ABC汉DEF”,6,应该输出“我ABC”,而不是“我ABC+汉的半个”。
    Java算法面试题:编写一个程序,将e: eck目录下的所有.java文件复制到e:jpg目录下,并将原来文件的扩展名从.java改为.jpg
  • 原文地址:https://www.cnblogs.com/-qiang/p/6667577.html
Copyright © 2011-2022 走看看