左滑删除功能

完整代码如下： （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. hihocoder 1054 滑动解锁 dfs

    详细分析见滑动解锁分析 AC代码 #include <cstdio> #include <cmath> #include <cctype> #include < ...

  2. nyoj913 取石子（十） SG函数 + Nimm博弈

    思路: 第一堆:SG = n % 3; 第二堆:无规律,打表即可,用hash比set快很多; 第三堆:SG = n; 第四堆:无规律 第五堆:SG = n % 2; 第六堆:SG = n % (i + ...

  3. Phpstrom操作git

    1.PHPstrom操作git[上传] 2.提交代码到仓库 2. 3.使用git bash上传代码仓库的代码到远程服务器 代开git bash进入到项目所在的目录,输入命令$  git push .上 ...

  4. orcale和hive常用函数对照表（？代表未证实）

    函数分类 oracle hive 说明 字符函数 upper('coolszy') upper(string A) ucase(string A) 将文本字符串转换成字母全部大写形式 lower('K ...

  5. QRCode 扫描二维码、扫描条形码、相册获取图片后识别、生成带 Logo 二维码、支持微博微信 QQ 二维码扫描样式

    目录 功能介绍 常见问题 效果图与示例 apk Gradle 依赖 布局文件 自定义属性说明 接口说明 关于我 功能介绍 根据之前公司的产品需求,参考 barcodescanner 改的,希望能帮助到 ...

  6. 迁移学习︱艺术风格转化:Artistic style-transfer+ubuntu14.0+caffe（only CPU）

    说起来这门技术大多是秀的成分高于实际,但是呢,其也可以作为图像增强的工具,看到一些比赛拿他作训练集扩充,还是一个比较好的思路.如何在caffe上面实现简单的风格转化呢? 好像网上的博文都没有说清楚,而 ...

  7. XP硬盘读写速度很慢的解决方法

    05购入的电脑,今日仍在发挥余热,但系统速度慢得出奇.今日检测了硬盘读写速度还不到2m/s,实在令人难以接受.一查之下,硬盘被置为PIO模式了,难怪. 用以下方法得以解决: 1.对桌面"我的 ...

  8. JavaScript禁止浏览器默认行为

    JavaScript禁止浏览器默认行为 1.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...

  9. directshow filter中添加属性页

    directShow 属性页的制作,为CBall filter加了一个属性页 具体为分以下步骤: 1.在要显示属性的类中继承现ISpecifyPropertyPages类,并实现此类的GetPages ...

  10. C# 枚举使用和对应说明获取实例

    1.定义枚举 /// <summary> /// 订单状态 /// </summary> public enum OrderState { 待支付 = 1, 待处理 = 2, ...