仿QQ左滑出现删除,只能有一条记录显示有左滑js实现
来源:互联网 发布:linux c sleep函数 编辑:程序博客网 时间:2024/04/30 08:20
</pre><pre name="code" class="html"> 这几天做一个app涉及到仿QQ的左滑,通过查资料,看博文,终于站在巨人的肩膀上用js实现了。该文实现了只能有一条记录的左滑,简单实用,在这里与大家共享,代码还有很多不足和要改进的地方,望各位提出来,我们不断改进,一起进步!
<!doctype html><html> <head> <meta charset="utf-8"> <title>左划出现删除按钮,右滑隐藏</title> <script type="text/javascript" src="jquery-1.8.3.min.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()); // 获取所有行,对每一行设置监听 var lines = $(".line-scroll-wrapper"); var len = lines.length; var lastX,lastXForMobile; // 用于记录被按下的对象 var pressedObj; //定义一个用于存储滑动过的对象的数组 var pressedObj1=[]; // 用于记录按下的点 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) { var diffX = e.changedTouches[0].pageX - lastXForMobile; if (diffX < -100) { for(var i = 0; i < pressedObj1.length; ++i){ $(pressedObj1[i]).animate({marginLeft:"0"}, 500); //清空数组 if(i==(pressedObj1.length-1)){ pressedObj1=[]; } } $(pressedObj).animate({marginLeft : "-132px"}, 500);// 左滑 pressedObj1.push(this); //记录被滑的这个对象,已被下一次滑动删除这个对象的左移效果 } else if (diffX > 100) { $(pressedObj).animate({marginLeft : "0"}, 500);// 右滑 } }); } // 网页在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) { var diffX = e.clientX - lastX; if (diffX < -150) { for (var i = 0; i < len; ++i) { var pressedObj111 = lines[i]; $(pressedObj111).animate({ marginLeft : "0" }, 100); if(i==(pressedObj1.length-1)){ pressedObj1=[]; } } $(pressedObj).animate({ marginLeft : "-101px" }, 500); // 左滑 } else if (diffX > 150) { $(pressedObj).animate({ marginLeft : "0" }, 500); // 右滑 } }); } }); </script> <style type="text/css"> * { margin: 0; padding: 0; } .line-wrapper { width: 100%; overflow: hidden; font-size: 1.3em; border-bottom: 1px solid #aaa; padding-top: 0.3em; padding-bottom: 0.3em; } .line-scroll-wrapper { white-space: nowrap; } .line-btn-delete { float: left; width: 2em; font-size: 0.8em; padding-top: 0.3em; padding-bottom: 0.3em; } .line-normal-wrapper { display: inline-block; float: left; } </style> </head> <body> <div class="line-wrapper"> <div class="line-scroll-wrapper"> <div class="line-normal-wrapper"> 轻松的方式符合us </div> <div class="line-btn-delete"> 删除123 </div> </div> </div> <div class="line-wrapper"> <div class="line-scroll-wrapper"> <div class="line-normal-wrapper"> 轻松的方式符合us </div> <div class="line-btn-delete"> 删除 </div> </div> </div> <div class="line-wrapper"> <div class="line-scroll-wrapper"> <div class="line-normal-wrapper"> 轻松的方式符合us个我 </div> <div class="line-btn-delete"> 删除 </div> </div> </div> <div class="line-wrapper"> <div class="line-scroll-wrapper"> <div class="line-normal-wrapper"> 轻松的方式符合u </div> <div class="line-btn-delete"> 删除 </div> </div> </div> <div class="line-wrapper"> <div class="line-scroll-wrapper"> <div class="line-normal-wrapper"> 轻松的方式 </div> <div class="line-btn-delete"> 删除 </div> </div> </div> <div class="line-wrapper"> <div class="line-scroll-wrapper"> <div class="line-normal-wrapper"> 轻松的方式 </div> <div class="line-btn-delete"> 删除 </div> </div> </div> <div class="line-wrapper"> <div class="line-scroll-wrapper"> <div class="line-normal-wrapper"> 轻松的方式符 </div> <div class="line-btn-delete"> 删除 </div> </div> </div> <div class="line-wrapper"> <div class="line-scroll-wrapper"> <div class="line-normal-wrapper"> 轻松的方式符合 </div> <div class="line-btn-delete"> 删除 </div> </div> </div> </body></html>
1 0
- 仿QQ左滑出现删除,只能有一条记录显示有左滑js实现
- 仿QQ左滑删除
- 仿QQ左滑删除
- 仿QQ左滑删除
- 仿QQ左滑删除功能实现分析(一)-预告
- 仿QQ左滑删除功能实现分析(二)-SwipeListView
- 简单ListView仿QQ左滑删除
- 仿QQ列表左滑删除效果
- 仿QQ左滑打开或删除
- RecyclerView 左滑(仿QQ左滑删除)
- RecyclerView 左滑(仿QQ左滑删除)
- 自定义listview 实现仿qq聊天列表左滑删除效果
- Android 仿QQ首页ListView左滑置顶、删除等实现源码
- Android仿QQ左滑删除置顶ListView
- 仿QQ消息列表的左滑置顶与删除
- listview左滑删除和置顶(仿QQ)
- Android仿QQ和iOS的ListView左滑出现删除和置顶等操作,可自定义菜单
- Android仿QQ侧滑删除实现
- java虚拟机类加载过程内存情况底层源码分析及ClassLoader讲解
- 如何与离职员工面谈沟通?
- Execution failed for task:"app:clean"
- OpenGL模板缓冲区---StencilBuffer
- Tomcat 7 源码分析 - 下载 tomcat source code 并导入eclipse
- 仿QQ左滑出现删除,只能有一条记录显示有左滑js实现
- 我们都忽略了Html5的力量,如果只看成一种技术就大错特错了!
- C、C++动态分配函数暨几种参数传递疑难解析
- Eclipse导入Tomcat源码
- 华为服务器RH5885 V3进入BIOS
- 第一个Android app,计算器~
- 自己利用opencv2.4.4和MFC写的视频目标标注助手
- 随记
- 203,状态栏