【前端】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,下面给大家演示一下使 ...
随机推荐
- windows Apache服务器配置
Apache 64位可以而32位不可以 安装Apache服务 注意: 如果没有自己设置Apache服务名,后面都可不跟-n "服务名",即采用默认的服务名称. 必须用管理员提示符打 ...
- vhost-user 简介
什么是 vhost-user 在 vhost 的方案中,由于 vhost 实现在内核中,guest 与 vhost 的通信,相较于原生的 virtio 方式性能上有了一定程度的提升,从 guest 到 ...
- 一个特殊的List去重问题的解决方案
原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/7039842.html 场景描述:公司新活动,需要在活动页面显示指定利率的四种投资项目,并且 ...
- shiro权限控制（二）：分布式架构中shiro的实现
前言:前段时间在搭建公司游戏框架安全验证的时候,就想到之前web最火的shiro框架,虽然后面实践发现在netty中不太适用,最后自己模仿shiro写了一个缩减版的,但是中间花费两天时间弄出来的shi ...
- 生成csv格式文件并导出至页面的前后台实现
一.前台实现: 1. HTML: <div> <a href="javascript:void(0);" class="btnStyleLeft&quo ...
- if语句中同时判断多个条件的多种方法
总结一下自己经常用到的python中的if语句同时判断多个条件的不同方法,假设有: x, y, z = 0, 1, 0 方法一,多个逻辑运算符一起使用,这也是最常用的写法: if x == 1 or ...
- Linux history命令
history命令主要用于显示历史命令, 重新执行历史命令. Linux系统当你在shell(控制台)中输入并执行命令时,shell会自动把你的命令记录到历史列表中,一般保存在用户目录下的.bash_ ...
- CF 716E. Digit Tree [点分治]
题意:一棵树,边上有一个个位数字,走一条路径会得到一个数字,求有多少路径得到的数字可以整除\(P\) 路径统计一般就是点分治了 \[ a*10^{deep} + b \ \equiv \pmod P\ ...
- BZOJ 2179 [快速傅里叶变换 高精度乘法]
2179: FFT快速傅立叶 Time Limit: 10 Sec Memory Limit: 259 MBSubmit: 3108 Solved: 1599[Submit][Status][Di ...
- Java的一些良好习惯及细节------持续更新中...
1.在做条件判断时,不要将变量放在判断符的左边,这样做可以防止出现空指针异常,以字符串比较为例: String name = "Tom"; //这种方式不推荐,如果变量name为空 ...