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 { 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-icon-wrapper { float: right; width: 120px; height: 120px; margin-right: 12px; }
.line-normal-icon-wrapper img { width: 120px; height: 120px; }
.line-normal-avatar-wrapper { width: 100px; height: 124px; float: left; margin-left: 12px; }
.line-normal-avatar-wrapper img { width: 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>
转载于:https://www.cnblogs.com/-qiang/p/6667577.html
jq 仿手机qq聊天记录滑动删除相关推荐
- Android开发学习之仿手机QQ消息列表侧滑删除效果
今天想和大家分享的是手机QQ消息列表侧滑删除效果,这种效果在IOS中被封装为一个列表控件,而手机QQ则是将这个功能移植到了Android上,换言之,这并非是手机QQ的独创.尽管如此,用户体验依然得到了 ...
- 仿 手机QQ 登录、注册、找回密码、好友列表、QQ状态等功能的实现
仿 手机QQ 登录.注册.找回密码.好友列表.QQ状态等功能的实现 全文 图 + 代码 .... 福利!!!(QQ登录背景,过度页面背景) 1.加载过程中的背景 2.登录页面 ==1. 登录页面 布局 ...
- 前端大作业-仿手机QQ
简介 此程序是本人大三时期的前端工程大作业,初学前端三件套(HTML.CSS.JavaScript)和Vue后所编写的一个程序,是一个仿手机QQ网页,以前端网页的形式实现手机QQ基本界面和功能. 本程 ...
- 安卓仿手机QQ消息BadgeView气泡跟随手指移动,并实现进出动画效果。
欢迎加安卓开发交流群:308372687(博主尽可能帮助大家)#安卓仿手机QQ消息BadgeView气泡,跟随手指移动,并实现进出动画效果. 欢迎加安卓开发交流群:308372687(博主尽可能帮助大 ...
- 仿手机QQ网络状态条的显示与消失,没网络时显示,有网络时自动消失 ,点击网络条设置网络
关注finddreams,一起分享,一起进步: http://blog.csdn.net/finddreams/article/details/44647843 我们都知道手机QQ上有这样一个功能,就 ...
- java解密手机QQ聊天记录
转载链接:http://blogjava.sinaapp.com/?p=38 手机QQ聊天记录需要手机root才可以获取到,这是个鸡肋,但是网上还有许多想解密的,还有收费的.如果查小三,估计可以有这么 ...
- ViewDragHelper实现仿qq列表滑动删除
实现过程概述 实现qq列表侧滑删除,核心还是ViewDragHelper的实现. 关于ViewDragHelper的基础用法,我在另外一篇博客ViewDragHelper简介中已经介绍过了.如果不是特 ...
- Android仿手机QQ空间动态评论,自动定位到输入框
手机QQ空间浏览好友动态时,可以直接对动态评论,点击某条评论,动态列表自动滚动,使输入框刚好在该评论下面,而不会覆盖住评论内容.如下图所示, 首先要实现输入框刚好在输入面板上面,且动态列表不会被挤上去 ...
- 手机qq 聊天记录 同步到电脑qq上
手机QQ 可以导出聊天记录为txt格式,但是电脑pcQQ 貌似不支持. 发现手机QQ有个同步功能,同步最近聊天记录. 电脑上也有. 普通 QQ用户可以漫游7天的好友聊天记录,不包括图片.这样,七天内, ...
最新文章
- 基础知识——变量和简单数据类型(一)
- 使用qsort对不连续的内存数据排序_数据结构教程_v20201121
- android菜单点击功能怎么做的,单击android中的Menu按钮打开上下文菜单
- 树状数组-神奇的二进制
- 聊聊SQL优化的基础思路
- javacript Function parameters(函数参数)
- Oracle优化避免索引失效
- gsm模块 java 录音_深入详解Android GSM驱动模块
- java课程讲解,Java基础教程详解:多线程(1)-----多线程概念
- MacOS Ventura 13.0 Beta6 (22A5331f) 带 OC 0.8.4 三分区原版黑苹果镜像
- 中文圣经 for Android
- (转)以太坊(Ethereum)全零地址(0x000000...)揭秘
- 洛谷p1330 封锁阳光大学-二分图染色
- 帮你踩坑系列:酷我音乐的歌词获取/下载,示例代码用 python
- CCTM_FormElement 类
- Windows Server 2016-Powershell之客户端加域
- GOCI数据批量下载
- imp-00003:oracle error 959 encountered
- 实验三 数据库完整性技术
- Online Learning and Pricing with Reusable Resources: Linear Bandits with Sub-Exponential Rewards: Li
热门文章
- 计算机文件管理ppt,计算机中的文件管理及应用研究.ppt
- ChatGPT——OpenAI推出的人工智能聊天机器人
- COMFORT 酒店 | 百年英式小熊伴你开启温暖圣诞季
- Redis 最全面试题(2021)
- 弘辽科技:拼多多上货时间技巧是什么?要注意什么?
- mysql修改字段是否非空
- Logistic回归示例:从疝气病预测病马的死亡率
- ajaxsubmit怎么显示加载中_电脑绝技教你怎么优化第一宇宙Visual Studio编辑器性能...
- java入门---Java 8 新特性之Nashorn JavaScript引擎
- mysql查询查询条件越多速度越快_MySQL技术专区性能优化速记 李博/Alex