转载请注明出处：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. DNS服务器解析域名的过程

    最近在读许令波老师的<深入分析Java Web技术内幕>,算是对DNS服务器域名解析有个大体的理解,以下的内容来自个人对书中内容的整理 1.什么是域名解析? 当我们在浏览器的地址栏输入一个 ...

  2. 通过traceroute追踪并打印成图片

    #!/usr/bin/evn python #-*-coding:utf-8 -*- import time import logging,warnings import subprocess imp ...

  3. ansible playbook实践(二)-基础相关命令

    ansible相关的命令: ansible  用来执行ansible管理命令 ansible-doc 用来获取模块的帮助文档 ansible-playbook 当有众多任务时,可编写成playbook ...

  4. Java对Jar文件的操作[转]

    原文地址:http://www.cnblogs.com/mailingfeng/archive/2012/04/24/2122160.html  String dirPath = System.get ...

  5. STP协议

    STP协议的作用: 第一, 可以避免网络环路和广播风暴. 二层数据包是没有TTL(time to live)的,如果不加以限制,可能会无限的传播下去.二层设备间如果存在环路,大量的广播包就可能导致广播 ...

  6. 洛谷 [P1113] 杂务

    图论的做法是topsort 一看见有序我们就想到了DAG图,于是用topsort做,对于每一个加入队列的顶点,都用它的时间去更新它所指向的点的时间,本质上仍是DP的思想,dp[i]=max{dp[j] ...

  7. BZOJ 3572: [Hnoi2014]世界树 [虚树 DP 倍增]

    传送门 题意: 一棵树,多次询问,给出$m$个点,求有几个点到给定点最近 写了一晚上... 当然要建虚树了,但是怎么$DP$啊 大爷题解传送门 我们先求出到虚树上某个点最近的关键点 然后枚举所有的边$ ...

  8. Codeforces Round #398 (Div. 2)

    Codeforces Round #398 (Div. 2) A.Snacktower 模拟 我和官方题解的命名神相似...$has$ #include <iostream> #inclu ...

  9. cocos2d-x代码阅读笔记 - 入口

    每一个C\C++程序都有一个非常有名的入口函数 main(),在Windows系统下,这个函数就变成了WinMain函数. 在cocos2d-x 2.0.4的Windows版本中,main函数非常简单 ...

  10. Windows上MongoDB的安装

    下载 下载MongoDB,自然是在他的官网下载相应系统的版本了,我下载的是Windows的安装包. 安装 傻瓜式安装,不多说.(默认安装在C盘的.) 启动 mongodb的数据存在一个叫data 文件 ...