【前端】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,下面给大家演示一下使 ...
随机推荐
- MySQL中, 如何查询某一天, 某一月, 某一年的数据.
今天 select * from 表名 where to_days(时间字段名) = to_days(now()); 昨天(包括昨天和今天的数据) SELECT * FROM 表名 WHERE TO_ ...
- 是否编码输出html字符
template.config(name, value)方法用于更改引擎的默认配置. 其中字段escape,类型为boolean,默认为true. 首先,我们不修改配置信息输出一段带有html标签的字 ...
- ABP官方文档翻译 8.1 通知系统
通知系统 介绍 发送模型 通知类型 通知数据 通知严重性 关于通知持久化 订阅通知 发布通知 用户通知管理 实时通知 客户端 通知存储 通知定义 介绍 在系统中通知用来基于特定的事件告知用户.ABP提 ...
- 使用Google Cloud Platform构建机器学习项目-宠物识别
宠物识别我们使用到了tensorflow object-detection API (https://github.com/tensorflow/models/tree/master/researc ...
- java异常丢失及异常链
1.Java中异常丢失的情况: 先定义三个异常: public class ExceptionA extends Exception { public ExceptionA(String str) { ...
- GitHub入门之路(1)
介绍 从本篇文章开始,是一系列介绍GitHub相关内容以及Git的一些基本操作的文章,记录了自己的学习过程. 概要 简单介绍GitHub是什么,Git又是什么. 1.Git是什么 Git是一款分散型的 ...
- 《第一行代码 android》 读书笔记：找出当前界面对应的Activity
在android开发中找出当前界面对应的Activity,步骤如下: 新建一个BaseActivity继承自Activity,然后在BaseActivity中重写onCreate()方法,通过getC ...
- 好用的Google漏洞爬虫：Google Mass Explorer
这是一款基于谷歌搜索引擎的自动化爬虫. 爬虫介绍 爬虫大体机制就是: 先进行一次谷歌搜索,将结果解析为特定格式,然后再提供给exp使用. 大家可以尝试使用–help来列出所有参数. 这个项目笔者会持续 ...
- SSE图像算法优化系列十七：一些图像处理中常用小过程的SSE实现。
在做图像处理的SSE优化时,也会经常遇到一些小的过程.数值优化等代码,本文分享一些个人收藏或实现的代码片段给大家. 一.快速求对数运算 对数运算在图像处理中也是个经常会遇到的过程,特备是在一些数据压缩 ...
- MongoDB安装篇-Win7 X64
介绍 MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案. MongoDB是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库 ...