左滑删除功能

完整代码如下： （touch.js）

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>touch事件</title>

		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<script src='./js/jquery-1.9.0.min.js'></script>

		<script src="./js/touch.min.js"></script>

		<style>

			* {

				padding: 0;

				margin: 0;

			}

			.main {

				width: 100%;

				height: auto;

				overflow: hidden;

				position: relative;

			}

			.list {

				height: 70px;

				margin-bottom: 10px;

				white-space: nowrap;

				position: relative;

			}

			.left {

				display: inline-block;

				width: 100%;

				height: 70px;

				background: #eeeeee;

				text-align: center;

				line-height: 70px;

			}

			.right {

				display: inline-block;

				width: 100px;

				height: 70px;

				background: #eb3639;

				color: #ffffff;

				text-align: center;

				line-height: 70px;

				margin-left: -5px;

			}

		</style>

	</head>

	<body>

		<div class="main">

			<div class="list">

				<div class="left">左边</div>

				<div class="right">右边</div>

			</div>

			<div class="list">

				<div class="left">左边</div>

				<div class="right">右边</div>

			</div>

			<div class="list">

				<div class="left">左边</div>

				<div class="right">右边</div>

			</div>

			<div class="list">

				<div class="left">左边</div>

				<div class="right">右边</div>

			</div>

		</div>

	</body>

	<script>

		$(function () {

			function slider( item ) {

				var obj = item.obj;

				if ( !obj.is('.list') ) {

					obj = obj.parent('.list');

				}

				$('.list').not(obj).animate({

					left: 0

				},'normal');

				obj.animate({

					left: item.left

				}, 'normal');

			}

			//左滑

			touch.on(document, 'swipeleft', function ( ) {

				slider({

					obj: $(this),

					left: '-100px'

				})

			});

			//右滑

			touch.on(document, 'swiperight', function () {

				slider({

					obj: $(this),

					left: 0

				})

			})

		})

	</script>

</html>

　　效果图： 

基于touch.js 左滑删除功能的更多相关文章

  1. tableView左滑删除功能

    实现三个代理方法即可 -(NSString *)tableView:(UITableView *)tableView titleForDeleteConfirmationButtonForRowAtI ...

  2. JS实现移动端购物车左滑删除功能

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  3. 微信小程序左滑删除功能

    效果图如下: wxml代码: <view class="container"> <view class="touch-item {{item.isTou ...

  4. Vue 仿QQ左滑删除功能（非原创）

    非原创,摘选来源:http://www.jb51.net/article/136221.htm. 废话不多说,相当实用,先记录. Html代码: <div class="contain ...

  5. Android ListView左滑删除、左滑自定义功能

    最近项目需要ListView左滑删除功能,搜集了很多资料发现了一个某一前辈写的库能很简单的实现这个功能,而且有源码,直接拿来使用了. 库名字叫做SwipeMenuListView,下面给大家演示一下使 ...

  6. [转]ANDROID仿IOS微信滑动删除_SWIPELISTVIEW左滑删除例子

    转载:http://dwtedx.sinaapp.com/itshare_290.html 本例子实现了滑动删除ListView的Itemdemo的效果.大家都知道.这种创意是来源于IOS的.左滑删除 ...

  7. Android滑动列表(拖拽，左滑删除，右滑完成)功能实现（1）

    场景: 近期做的TODO APP需要在主页添加一个功能,就是可以左滑删除,右滑完成.看了一下当前其他人做的例如仿探探式的效果,核心功能基本一样,但是和我预想的还是有少量区别,于是干脆自己重头学一遍如何 ...

  8. mui 列表项左右滑删除功能升级(仿微信左滑 点击删除后出现确认删除)

    mui 列表项左右滑删除功能升级(仿微信左滑 点击删除后出现确认删除) 2018-06-19更新显示样式

  9. 微信小程序独家秘笈之左滑删除

    代码地址如下:http://www.demodashi.com/demo/14056.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

随机推荐

  1. HDU - 3567 IDA* + 曼哈顿距离 + 康托 [kuangbin带你飞]专题二

    这题难度颇大啊,TLE一天了,测试数据组数太多了.双向广度优先搜索不能得到字典序最小的,一直WA. 思路:利用IDA*算法,当前状态到达目标状态的可能最小步数就是曼哈顿距离,用于搜索中的剪枝.下次搜索 ...

  2. BZOJ3223/洛谷P3391 - 文艺平衡树

    BZOJ链接 洛谷链接 题意 模板题啦~2 代码 //文艺平衡树 #include <cstdio> #include <algorithm> using namespace ...

  3. 30分钟掌握ES6/ES2015核心内容（下）

    在 30分钟掌握ES6/ES2015核心内容(上)我们讲解了es6最常用的一些语法:let, const, class, extends, super, arrow functions, templa ...

  4. Pokémon Go呼应设计：让全世界玩家疯狂沉迷

    引言:什么样的呼应设计会让移动游戏玩家沉迷?那必须为玩家构建一个属于玩家本人或者被玩家认可的虚拟环境,或者说是被玩家认可的虚拟世界.在移动游戏时代,想要做到这一点并不容易.但Pokémon Go却做到 ...

  5. tensorflow+入门笔记︱基本张量tensor理解与tensorflow运行结构

    Gokula Krishnan Santhanam认为,大部分深度学习框架都包含以下五个核心组件: 张量(Tensor) 基于张量的各种操作 计算图(Computation Graph) 自动微分(A ...

  6. Linux 的进程状态

    (1)运行:当一个进程在处理机上运行时,则称该进程处于运行状态.处于此状态的进程的数目小于等于处理器的数目,对于单处理机系统,处于运行状态的进程只有一个.在没有其他进程可以执行时(如所有进程都在阻塞状 ...

  7. R语言实现SOM（自组织映射）模型（三个函数包+代码）

    每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- SOM自组织映射神经网络模型 的R语言实现 笔 ...

  8. R语言自动化报告格式——knitr

    R语言自动化报告格式--knitr 相关文献: R语言自动化报告格式--knitr 资讯 | R Notebooks 即将发布 ------------------------------------ ...

  9. Flex中创建Accordion报错

    1.错误描述 2.错误原因 <mx:Accordion width="100%" height="100%"> <s:NavigatorCon ...

  10. 在SDL工程中让SDL_ttf渲染汉字

    有时候在关于SDL的博文中看到一些评论,说SDL对中文的支持不佳,因为当程序涉及中文时总是输出乱码. 照我个人观点,这里面很多都是误解.下面就根据我在windows下使用SDL的情况,说说我的观点. ...