【前端】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,下面给大家演示一下使 ...
随机推荐
- Sql Server的艺术（六） SQL 子查询，创建使用返回多行的子查询，子查询创建视图
子查询或内部查询或嵌套查询在另一个SQL查询的查询和嵌入式WHERE子句中. 子查询用于返回将被用于在主查询作为条件的数据,以进一步限制要检索的数据. 子查询可以在SELECT,INSERT,UPDA ...
- SpringMVC 参数绑定注解解析
本文介绍了用于参数绑定的相关注解. 绑定:将请求中的字段按照名字匹配的原则填入模型对象. SpringMVC就跟Struts2一样,通过拦截器进行参数匹配. 代码在 https://github.co ...
- c# Char && string
char 支持的方法 字符串 声明字符串 String str = [null]; 可以用此方法声明一个空字符串 连接字符串 str +"" + str1; 比较两个字符串 C ...
- ABP官方文档翻译 9.3 NHibernate集成
NHibernate集成 Nuget包 配置 实体映射 仓储 默认实现 自定义仓储 应用程序特定基础仓储类 ABP可以使用任何ORM框架,它内置集成NHibernate.此文档将讲解ABP如何使用NH ...
- ABP官方文档翻译 3.5 规约
规约 介绍 示例 创建规范类 使用仓储规约 组合规约 讨论 什么时候使用? 什么时候不使用? 介绍 规约模式是一种特别的软件设计模式,通过使用布尔逻辑将业务规则链接起来重新调配业务规则.(维基百科). ...
- BZOJ 3876: [Ahoi2014]支线剧情 [上下界费用流]
3876: [Ahoi2014]支线剧情 题意:每次只能从1开始,每条边至少经过一次,有边权,求最小花费 裸上下界费用流...每条边下界为1就行了 注意要加上下界*边权 #include <io ...
- POJ 3621 Sightseeing Cows [最优比率环]
感觉去年9月的自己好$naive$ http://www.cnblogs.com/candy99/p/5868948.html 现在不也是嘛 裸题,具体看学习笔记 二分答案之后判负环就行了 $dfs$ ...
- 引用MinGW生成的.dll.a后出现的问题
以前很少调用MinGW的运行时库,现在用到一个项目,用到了glib和gettext等. 遇到了一个问题,折腾了一个下午. gettext的运行时库之一是intl,MinGW只提供了.dll.a,于是参 ...
- centos 手动增加swap分区
SWAP是Linux中的虚拟内存,用于扩充物理内存不足而用来存储临时数据存在的.它类似于Windows中的虚拟内存.在Windows中,只可以使用文件来当作虚拟内存.而linux可以文件或者分区来当作 ...
- 开始使用PHPUnit单元测试
何为单元测试: 指对软件中的基本单元进行测试,如函数.方法等,以检查其返回值或行为是否符合预期:实际中软件是很复杂的,由许多组件构成,执行流程连贯在一起,要进行单元片段的测试,就需要为其提供执行上下文 ...