【前端】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,下面给大家演示一下使 ...
随机推荐
- 2018-01-28-TF源码做版本兼容的一个粗暴方法
layout: post title: 2018-01-28-TF源码做版本兼容的一个粗暴方法 key: 20180128 tags: IT AI TF modify_date: 2018-01-28 ...
- 反向代理和HTTP重定向
1.什么是正向代理(前向代理)? 在NAT技术(Network Address Translation)出现之前,所有主机无法直接与外网相连,要想上网,需要连接到一台能够访问外网的Web服务器,再通过 ...
- ng-show,ng-if区别
在使用bootstrap中,我们会经常用到按钮组,也就是btn-group,如果仔细观察的话,会发现一个按钮组的第一个和最后一个按钮分别是有圆角的,如下图: 但是中间的按钮是没有圆角的,这样显得比较美 ...
- 01_Linux软件源配置
一.国内软件源 阿里源:https://mirrors.aliyun.com/ 清华大学:https://mirrors.tuna.tsinghua.edu.cn/ 中科大 : https://mir ...
- jquery 中json数组的操作 增删改
1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限, ...
- 面向对象编程之super内置函数的用法
先来看一段代码: 定义一个名叫People的父类,又定义了一个叫Teacher的老师类和一个叫Student的学生类 来继承People的类,并根据这两个子类实例化出两个对象s1和t1. class ...
- BZOJ 3990: [SDOI2015]排序 [搜索]
3990: [SDOI2015]排序 题意:\(2^n\)的一个排列,给你n种操作,第i种把每\(2^{i-1}\)个数看成一段,交换任意两段.问是这个序列有序的操作方案数,两个操作序列不同,当且仅当 ...
- BZOJ 2631: tree [LCT splay区间]
2631: tree Time Limit: 30 Sec Memory Limit: 128 MBSubmit: 3854 Solved: 1292[Submit][Status][Discus ...
- bind,apply,call区别总结
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 小甲鱼OD学习第2讲
这次我们的任务是让我们输入任意用户名密码判断正确 我们输入fishc和111111,显示错误 我们猜测这是用GetDlgItemTextW来收集账号密码的输入值 我们找到了两个函数,给这两个函数都下断 ...