【前端】jQuery移动端左滑删除
转载请注明出处：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移动端左滑删除的更多相关文章
- Android开发学习之路-PopupWindow和仿QQ左滑删除
这周作业,要做一个类似QQ的左滑删除效果的ListView,因为不想给每个item都放一个按钮,所以决定用PopupWindow,这里记录一下 先放一下效果图: 先说明一下这里面的问题: ①没有做到像 ...
- wex5 实战 苹果左滑删除与长按编辑
用了多年苹果,习惯了苹果的左滑删除与长按编辑,特别是短信什么的,很多安卓界面也采用了类似方式. 我的想法突如其来,用wex5也设计一个这样的功能,可以吗? 那句广告词,没有什么不可能. 呵呵. 一 ...
- 仿QQ列表左滑删除
一直想写个仿QQ通讯列表左滑删除的效果,今天终于忙里偷闲,简单一个. 大概思路是这样的: 通过 ontouchstartontouchmoveontouchend 结合css3的平移. 不多说,直接上 ...
- 模仿QQ左滑删除
需求: 1.左滑删除 2.向左滑动距离超过一半的时候让它自动滑开,向右滑动超过一半的时候自动隐藏 3.一次只允许滑开一个item 还有,根本不需要自定义view来实现,谨防入坑 布局: <?xm ...
- tableView左滑删除功能
实现三个代理方法即可 -(NSString *)tableView:(UITableView *)tableView titleForDeleteConfirmationButtonForRowAtI ...
- [转]ANDROID仿IOS微信滑动删除_SWIPELISTVIEW左滑删除例子
转载:http://dwtedx.sinaapp.com/itshare_290.html 本例子实现了滑动删除ListView的Itemdemo的效果.大家都知道.这种创意是来源于IOS的.左滑删除 ...
- 基于touch.js 左滑删除功能
左滑删除功能 完整代码如下: (touch.js) <!DOCTYPE html> <html> <head> <meta charset="UTF ...
- Android滑动列表(拖拽，左滑删除，右滑完成)功能实现（1）
场景: 近期做的TODO APP需要在主页添加一个功能,就是可以左滑删除,右滑完成.看了一下当前其他人做的例如仿探探式的效果,核心功能基本一样,但是和我预想的还是有少量区别,于是干脆自己重头学一遍如何 ...
- Android ListView左滑删除、左滑自定义功能
最近项目需要ListView左滑删除功能,搜集了很多资料发现了一个某一前辈写的库能很简单的实现这个功能,而且有源码,直接拿来使用了. 库名字叫做SwipeMenuListView,下面给大家演示一下使 ...
随机推荐
- 【转】<string> <string.h> <cstring>的区别
#include < string.h > void main() { string aaa = " abcsd d " ; printf( " lookin ...
- java SimpleDateFormat日期与时间戳的相互转换
自我总结,有什么不到位的地方,各位可以帮忙纠正补充一下,感激不尽! 目的:SimpleDateFormat类可以很随意的组合日期时间的格式,不止单纯的yyyy-MM-dd这种格式 废话不多说,上代码 ...
- editplus 常用正则
EditPlus的查找,替换,文件中查找支持以下的正则表达式: Expression Description\t Tab character.\n New line.. Matches any cha ...
- ASP.NET没有魔法——ASP.NET MVC 模型验证
在前面的文章中介绍了用户的注册及登录功能,在注册用户时可以通过代码的形式限制用户名及密码的格式,如果不符合要求那么就无法完成操作,如下图: 该功能的原理是Identity基于的Entity Frame ...
- AQS 框架之 Unsafe 源码详解
■ 前言 之前 LockSupport那篇已经叙述了是线程阻塞工具类,其底层由 Unsafe 实现,即 park(), unpark() 方法,获取指针偏移量,并操纵内存.本篇主要介绍 Unsafe ...
- 前端-高潮 jQuery
jQuery:就是让页面动起来 参考手册:http://jquery.cuishifeng.cn/ DOM/BOM/javaScript 继承的类库 <--->模块 一.查找元素 二.操作 ...
- ThinkPHP删除栏目（单）
当我们做一些网站项目的时候,都会遇到这样一类问题,删除一个栏目,而这个栏目又不是最底层栏目,也就是说,被删除的栏目拥有子栏目,这时,我们执行删除该栏目的命令,就需要将该栏目及其子栏目一并删除,因为我们 ...
- 引用MinGW生成的.dll.a后出现的问题
以前很少调用MinGW的运行时库,现在用到一个项目,用到了glib和gettext等. 遇到了一个问题,折腾了一个下午. gettext的运行时库之一是intl,MinGW只提供了.dll.a,于是参 ...
- srand()和rand（）函数的使用
rand()函数不接受参数,默认以1为种子(即起始值). 随机数生成器总是以相同的种子开始,所以形成的伪随机数列也相同,失去了随机意义.(但这样便于程序调试) srand()函数就是指明种子的大小:只 ...
- LeetCode - 654. Maximum Binary Tree
Given an integer array with no duplicates. A maximum tree building on this array is defined as follo ...