转载请注明出处：http://www.cnblogs.com/shamoyuu/p/left_slide_menu.html

 <!doctype html>

 <html>

     <head>

         <meta charset="utf-8">

         <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,user-scalable=no">

         <title>左划删除</title>

         <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>

         <style type="text/css">

             * {

                 margin: 0;

                 padding: 0;

             }

             .animate-slide-start {

                 -webkit-transition: all 0.2s ease-in-out;

                 -moz-transition: all 0.2s ease-in-out;

                 transition: all 0.2s ease-in-out;

             }

             .animate-slide {

                 -webkit-transform: translate3d(-55px, 0, 0);

                 -moz-transform: translate3d(-55px, 0, 0);

                 transform: translate3d(-55px, 0, 0);

             }

             .slide-wrapper {

                 width: 100%;

                 height: 60px;

                 overflow: hidden;

                 border-bottom: 1px solid #ccc;

             }

             .slide-scroll {

                 height: 60px;

                 overflow: hidden;

                 white-space: nowrap;

             }

             .slide-content-button {

                 width: 55px;

                 height: 60px;

             }

             .slide-content-button button {

                 width: 100%;

                 height: 100%;

                 border: none;

                 background: #ffe313;

                 color: #1f1f36;

             }

             .slide-content {

                 float: left;

                 display: inline-block;

                 height: 60px;

                 line-height: 60px;

             }

         </style>

         <script type="text/javascript">

             $(function() {

                 //手指滑动多少距离就认为是滑成功

                 //这个值不能太大，否则影响斜着滑动时，垂直滑动的流畅性，也不能太小，太灵敏也不好

                 var diffXDistance = 50;

                 //当前滑动的对象

                 var currentObject;

                 //上一次滑动的对象

                 var lastObject;

                 //是否可以左右滑动，在上下滑的时候禁止左右滑

                 var canSlide = true;

                 //用于记录按下的点

                 var startPoint;

                 $(".slide-content").css({

                     width: $(".slide-wrapper").width()

                 });

                 $(".slide-scroll").css({

                     width: $(".slide-wrapper").width() + $(".slide-content-button").width()

                 })

                 .on('touchstart', function(e) {

                     currentObject = this;

                     startPoint = {

                         x: e.originalEvent.changedTouches[0].pageX,

                         y: e.originalEvent.changedTouches[0].pageY

                     };

                 })

                 .on('touchmove', function(e) {

                     //如果是左右滑动，就禁止上下的滑动

                     //如果是上下的滑动，就禁止左右滑动

                     if(Math.abs(e.originalEvent.changedTouches[0].pageX - startPoint.x) > Math.abs(e.originalEvent.changedTouches[0].pageY - startPoint.y)) {

                         event.preventDefault();

                     } else {

                         canSlide = false;

                     }

                 })

                 .on('touchend', function(e) {

                     //如果是上下滑动，这里就直接返回了

                     if(!canSlide) {

                         canSlide = true;

                         return true;

                     }

                     //点击除当前左滑对象之外的任意其他位置

                     if(lastObject && currentObject != lastObject) {

                         //右滑→

                         $(lastObject).removeClass("animate-slide");

                         //清空上一个左滑的对象

                         lastObject = undefined;

                     }

                     var diffX = e.originalEvent.changedTouches[0].pageX - startPoint.x;

                     if(diffX < -diffXDistance) {

                         //左滑←

                         $(currentObject).addClass("animate-slide");

                         if(lastObject && lastObject != currentObject) {

                             //右滑→

                             $(lastObject).removeClass("animate-slide");

                         }

                         //记录上一个左滑的对象

                         lastObject = currentObject;

                     } else if(diffX >= diffXDistance) {

                         if(currentObject == lastObject) {

                             //右滑→

                             $(currentObject).removeClass("animate-slide");

                             //清空上一个左滑的对象

                             lastObject = undefined;

                         }

                     }

                 });

             });

         </script>

     </head>

     <body>

         <div class="slide-wrapper">

             <div class="slide-scroll animate-slide-start">

                 <div class="slide-content">

                     <div>我是内容</div>

                 </div>

                 <div class="slide-content-button"><button>删除</button></div>

             </div>

         </div>

         <div class="slide-wrapper">

             <div class="slide-scroll animate-slide-start">

                 <div class="slide-content">

                     <div>我是内容</div>

                 </div>

                 <div class="slide-content-button"><button>删除</button></div>

             </div>

         </div>

         <div class="slide-wrapper">

             <div class="slide-scroll animate-slide-start">

                 <div class="slide-content">

                     <div>我是内容</div>

                 </div>

                 <div class="slide-content-button"><button>删除</button></div>

             </div>

         </div>

         <div class="slide-wrapper">

             <div class="slide-scroll animate-slide-start">

                 <div class="slide-content">

                     <div>我是内容</div>

                 </div>

                 <div class="slide-content-button"><button>删除</button></div>

             </div>

         </div>

         <div class="slide-wrapper">

             <div class="slide-scroll animate-slide-start">

                 <div class="slide-content">

                     <div>我是内容</div>

                 </div>

                 <div class="slide-content-button"><button>删除</button></div>

             </div>

         </div>

         <div class="slide-wrapper">

             <div class="slide-scroll animate-slide-start">

                 <div class="slide-content">

                     <div>我是内容</div>

                 </div>

                 <div class="slide-content-button"><button>删除</button></div>

             </div>

         </div>

         <div class="slide-wrapper">

             <div class="slide-scroll animate-slide-start">

                 <div class="slide-content">

                     <div>我是内容</div>

                 </div>

                 <div class="slide-content-button"><button>删除</button></div>

             </div>

         </div>

         <div class="slide-wrapper">

             <div class="slide-scroll animate-slide-start">

                 <div class="slide-content">

                     <div>我是内容</div>

                 </div>

                 <div class="slide-content-button"><button>删除</button></div>

             </div>

         </div>

         <div class="slide-wrapper">

             <div class="slide-scroll animate-slide-start">

                 <div class="slide-content">

                     <div>我是内容</div>

                 </div>

                 <div class="slide-content-button"><button>删除</button></div>

             </div>

         </div>

         <div class="slide-wrapper">

             <div class="slide-scroll animate-slide-start">

                 <div class="slide-content">

                     <div>我是内容</div>

                 </div>

                 <div class="slide-content-button"><button>删除</button></div>

             </div>

         </div>

         <div class="slide-wrapper">

             <div class="slide-scroll animate-slide-start">

                 <div class="slide-content">

                     <div>我是内容</div>

                 </div>

                 <div class="slide-content-button"><button>删除</button></div>

             </div>

         </div>

         <div class="slide-wrapper">

             <div class="slide-scroll animate-slide-start">

                 <div class="slide-content">

                     <div>我是内容</div>

                 </div>

                 <div class="slide-content-button"><button>删除</button></div>

             </div>

         </div>

         <div class="slide-wrapper">

             <div class="slide-scroll animate-slide-start">

                 <div class="slide-content">

                     <div>我是内容</div>

                 </div>

                 <div class="slide-content-button"><button>删除</button></div>

             </div>

         </div>

     </body>

 </html>

【前端】jQuery移动端左滑删除的更多相关文章

  1. Android开发学习之路-PopupWindow和仿QQ左滑删除

    这周作业,要做一个类似QQ的左滑删除效果的ListView,因为不想给每个item都放一个按钮,所以决定用PopupWindow,这里记录一下 先放一下效果图: 先说明一下这里面的问题: ①没有做到像 ...

  2. wex5 实战 苹果左滑删除与长按编辑

    用了多年苹果,习惯了苹果的左滑删除与长按编辑,特别是短信什么的,很多安卓界面也采用了类似方式. 我的想法突如其来,用wex5也设计一个这样的功能,可以吗? 那句广告词,没有什么不可能. 呵呵. 一   ...

  3. 仿QQ列表左滑删除

    一直想写个仿QQ通讯列表左滑删除的效果,今天终于忙里偷闲,简单一个. 大概思路是这样的: 通过 ontouchstartontouchmoveontouchend 结合css3的平移. 不多说,直接上 ...

  4. 模仿QQ左滑删除

    需求: 1.左滑删除 2.向左滑动距离超过一半的时候让它自动滑开,向右滑动超过一半的时候自动隐藏 3.一次只允许滑开一个item 还有,根本不需要自定义view来实现,谨防入坑 布局: <?xm ...

  5. tableView左滑删除功能

    实现三个代理方法即可 -(NSString *)tableView:(UITableView *)tableView titleForDeleteConfirmationButtonForRowAtI ...

  6. [转]ANDROID仿IOS微信滑动删除_SWIPELISTVIEW左滑删除例子

    转载:http://dwtedx.sinaapp.com/itshare_290.html 本例子实现了滑动删除ListView的Itemdemo的效果.大家都知道.这种创意是来源于IOS的.左滑删除 ...

  7. 基于touch.js 左滑删除功能

    左滑删除功能 完整代码如下: (touch.js) <!DOCTYPE html> <html> <head> <meta charset="UTF ...

  8. Android滑动列表(拖拽，左滑删除，右滑完成)功能实现（1）

    场景: 近期做的TODO APP需要在主页添加一个功能,就是可以左滑删除,右滑完成.看了一下当前其他人做的例如仿探探式的效果,核心功能基本一样,但是和我预想的还是有少量区别,于是干脆自己重头学一遍如何 ...

  9. Android ListView左滑删除、左滑自定义功能

    最近项目需要ListView左滑删除功能,搜集了很多资料发现了一个某一前辈写的库能很简单的实现这个功能,而且有源码,直接拿来使用了. 库名字叫做SwipeMenuListView,下面给大家演示一下使 ...

随机推荐

  1. Shader 入门笔记(三) ShaderLab 初识

    Unity中,Unity Shader 都是ShaderLab 来编写的.ShaderLab 是Unity提供的编写Unity Shader 的一种说明性语言. 1)Properties :定义了着色 ...

  2. zabbix3.2_yum官方文档centos 7版

    Installation from packages 1 Repository installation 2 Server installation with MySQL database 3 Ser ...

  3. Linux时间转标准时间

    [root@nhserver2 ~]# date -d '1970-1-1 0:0:0 GMT + 1394592071 seconds'Wed Mar 12 10:41:11 CST 2014

  4. Markdown内嵌Html语言

    概述 Markdown是内嵌Html语言的,这使得我们可以在Markdown文档里面实现很多有趣的东西.现在记录在此,供自己以后参考,相信对其他人也有用. 介绍 Markdown的语法只有一个目标:作 ...

  5. 解决C#编译中"csc不是内部或外部命令"的问题

    安装完 VisualStudio 编译环境后,是不能用命令行直接编译写好的csc文件的,如果不配置环境变量,在命令提示符(cmd)中编译扩展名为cs的文件,会出现错误提示"csc不是内部或外 ...

  6. Spring MVC执行的流程

    1.Spring MVC应用的开发步骤 a.在web.xml文件中定义前端控制器DispatcherServlet来拦截用户请求.由于Web应用是基于请求/响应架构的应用,所以 不管哪个MVC Web ...

  7. 汇编语言2（mooc）

    伪指令没有:冒号.

  8. python+opencv2相机位姿估计

    最近在做基于图像的室内定位方面的研究,于是使用到了百度最新的室内数据库Image-based Localization (IBL) .由于该数据库给出的数据是每幅图像和其对应相机的内外参数和光心投影方 ...

  9. 【SSH框架】之Hibernate系列一

    微信公众号:compassblog 欢迎关注.转发,互相学习,共同进步! 有任何问题,请后台留言联系! 1.Hibernate框架概述 (1).什么是HibernateHibernate是一个开放源代 ...

  10. 【linux之bash】

    bash的发展 1974年 贝尔实验室 Bourne Bourne Shell --> Bsh.sh 1978年 berke bill jey C shell --> Csh tcsh 8 ...