转载请注明出处：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. awkOFS问题

    awk改变了OFS,$0却没变化一个文件1.txt,内容如下 a b c d e 目的把列变行,输出为: a b c d e 脚本如下: awk 'BEGIN{RS="";FS=& ...

  2. [JavaScript]自执行函数

    最近在接触mui的时候,遇到了一段代码: (function($, doc) { $.init({ statusBarBackground: '#f7f7f7' }); $.plusReady(fun ...

  3. ORACLE 建表语句（表名及字段名大写）

    ORACLE建表时如果表名或者字段名存在大小写同时存在的情况下,默认为区分大小写,此时在select/updata等操作时需要在表名或者字段名上添加双引号,否则会报"视图不存在"的 ...

  4. mui点击加载，下拉刷新，上下整合代码

    mui点击加载,下拉刷新,上下整合代码 mui的是上拉加载,但是老大说要做成点击加载,所以就改了一些 代码应该是有些问题的,测到了大家就自己改下. 首先要说明的是,有下拉刷新的页面一定要是双webvi ...

  5. [Cpp] 面向对象程序设计 C++

    初始化列表(包括成员对象初始化) 初始化列表 ( 推荐 ) :  可以初始化任何类型的数据, 不管是不是普通类型还是对象,都建议用.  不再需要在构造器中赋值了, 而且初始化列表比构造函数要早执行.  ...

  6. 创建一个vue项目的过程

    创建一个vue项目: 1.首先从UI手上拿到PSD设计图,然后看设计搞的内容,需要做个大概的页面布局 2.做vue之前不许安装node,因为做vue项目要和node结合使用 3.然后安装vue脚手架: ...

  7. BZOJ 3551: [ONTAK2010]Peaks加强版 [Kruskal重构树 dfs序 主席树]

    3551: [ONTAK2010]Peaks加强版 题意:带权图,多组询问与一个点通过边权\(\le lim\)的边连通的点中点权k大值,强制在线 PoPoQQQ大爷题解传送门 说一下感受: 容易发现 ...

  8. 百度地图、高德地图、Google地图等坐标系相关梳理

    1.地理坐标系与投影坐标系 地理坐标系也就是球面坐标系,是将本不是椭球体的地球进行椭球体化,从而形成球面坐标体系,国际标准的地理坐标系就是WGS-84坐标系: 只不过各个国家为了反映该国家所在区域地球 ...

  9. DaemonSet 案例分析 - 每天5分钟玩转 Docker 容器技术（130）

    本节详细分析两个 k8s 自己的 DaemonSet:kube-flannel-ds 和 kube-proxy . kube-flannel-ds 下面我们通过分析 kube-flannel-ds 来 ...

  10. 简述java中equals()方法和==的区别

    ==与equals的主要区别是: ==: ==常用于比较原生类型(基本数据类型):byte,short,char,int,long,float,double,boolean,比较的是他们的值. 若用= ...