移动WEB模拟原声APP滑动删除

效果

代码



<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>模拟App滑动删除</title>

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

	<link rel="stylesheet" href="/static/css/base.css">

	<link rel="stylesheet" href="http://at.alicdn.com/t/font_1454057613_1757398.css">

	<style>

	body {

		background-color: #f2f2f2;

	}

	h1 {

		text-align: center;

		font-size: 1.4em;

		padding-top: 2em;

		padding-bottom: 2em;

	}

	.wrapper {

		position: relative;

		height: 100px;

		overflow: hidden;

		padding-bottom: 5%;

	}

	.container {

		position: absolute;

		left: 0;

		width: 100%;

		height: 100px;

		line-height: 100px;

		padding-left: 5%;

		box-sizing: border-box;

		background-color: #fff;

		transition: left cubic-bezier(.68,.69,.11,.4) 0.2s;

		-webkit-transition: left cubic-bezier(.68,.69,.11,.4) 0.2s;

		font-size: 1.2em;

		font-weight: 200;

	}

	.delete {

		float: left;

		position: absolute;

		width: 100px;

		top: 0;

		right: -100px;

		background-color: #f00;

		color: #fff;

		text-align: center;

		height: 100px;

		line-height: 100px;

	}

	.delete i.iconfont {

		font-size: 1em;

		padding-right: 5px;

	}

	p {

		text-align: center;

		padding-top: 4em;

		padding-bottom: 6em;

		color: #555;

		font-size: 1em;

	}

	</style>

</head>

<body>

	<h1>移动WEB模拟原声APP滑动删除</h1>

	<div class="wrapper">

		<div class="container">左右滑动<div class="delete"><i class="iconfont icon-shanchu"></i>删除</div></div>

	</div>

	<div class="wrapper">

		<div class="container">左右滑动<div class="delete"><i class="iconfont icon-shanchu"></i>删除</div></div>

	</div>

	<div class="wrapper">

		<div class="container">左右滑动<div class="delete"><i class="iconfont icon-shanchu"></i>删除</div></div>

	</div>

	<div class="wrapper">

		<div class="container">左右滑动<div class="delete"><i class="iconfont icon-shanchu"></i>删除</div></div>

	</div>

	<div class="wrapper">

		<div class="container">左右滑动<div class="delete"><i class="iconfont icon-shanchu"></i>删除</div></div>

	</div>

	<p>西安领可网络 ChenShuo 2016</p>

	<script>

	var container = document.querySelectorAll('.container');

	for(var i=0; i<container.length; i++) {

		var x, y, X, Y, swipeX, swipeY;

		container[i].addEventListener('touchstart', function(event) {

			x = event.changedTouches[0].pageX;

			y = event.changedTouches[0].pageY;

			swipeX = true;

			swipeY = true ;

		});

		container[i].addEventListener('touchmove', function(event) {

			X = event.changedTouches[0].pageX;

			Y = event.changedTouches[0].pageY;

			// 左右滑动

			if(swipeX && Math.abs(X-x) - Math.abs(Y-y) > 0) {

				// 阻止事件冒泡

				event.stopPropagation();

				if(X - x > 10) {

					event.preventDefault();

					this.style.left = '0px';

				}

				if(x - X > 10) {

					event.preventDefault();

					this.style.left = '-100px';

				}

				swipeY = false;

			}

			// 上下滑动

			if(swipeY && Math.abs(X-x) - Math.abs(Y-y) < 0) {

				swipeX = false;

			}

		});

	}

	</script>

</body>

</html>

移动WEB模拟原声APP滑动删除的更多相关文章

  1. Safari WebApp 模拟 原声APP禁止打开新窗口JS代码

    if(("standalone" in window.navigator) && window.navigator.standalone) { var noddy, ...

  2. 原生H5页面模拟APP左侧滑动删除效果

    话不多说,往左侧滑动,显示删除,我们先来看一下效果图:如下: 这个布局我就不多说,反正就是一行ul,li, class名“item” js代码如下: $(".item").on(& ...

  3. 关于ios原声嵌入web页面的问题

    当在一个界面中既有原生又有web的时候,如果想让上下整体滑动的话,我们怎么确定web的高度呢,下面分享一下我的心得 首先在webView的代理方法中我们可以获取到加载完整个web页面的高度 - (vo ...

  4. Android 用HorizontalScrollView实现ListView的Item滑动删除 ，滑动错乱 冲突

    用HorizontalScrollView实现类似微信的滑动删除 测试于:Android2.2+ 对于Android来说按键操作已经在减少,越来越多的手势操作层出不穷,今天介绍一款LIstView的I ...

  5. Android开发学习之路-RecyclerView滑动删除和拖动排序

    Android开发学习之路-RecyclerView使用初探 Android开发学习之路-RecyclerView的Item自定义动画及DefaultItemAnimator源码分析 Android开 ...

  6. Web程序员开发App系列 - 申请苹果开发者账号

    Web程序员开发App系列 Web程序员开发App系列 - 认识HBuilder Web程序员开发App系列 - 申请苹果开发者账号 Web程序员开发App系列 - 调试Android和iOS手机代码 ...

  7. ListView滑动删除效果实现

    通过继承ListView然后结合PopupWindow实现 首先是布局文件: delete_btn.xml:这里只需要一个Button <?xml version="1.0" ...

  8. Android的SwipeToDismiss第三方开源框架模拟QQ对话列表侧滑删除，置顶，将头像图片圆形化处理。

      <Android SwipeToDismiss:左右滑动删除ListView条目Item> Android的SwipeToDismiss是github上一个第三方开源框架(github ...

  9. 下拉刷新列表添加SwipeDismissListViewTouchListener实现滑动删除某一列。

    <Android SwipeToDismiss:左右滑动删除ListView条目Item> Android的SwipeToDismiss是github上一个第三方开源框架(github上的 ...

随机推荐

  1. mysql innobackupex备份工具

    先简单介绍一下这个工具:innobackupexinnobackupex比xtarbackup有更强的功能,它整合了xtrabackup和其他的一些功能,他不但可以全量备份/恢复,还可以基于时间的增量 ...

  2. zabbix metrics

    http://blog.csdn.net/hengyunabc/article/details/44072285

  3. WPF子窗体：ChildWindow

    wpf的子窗体选择有很多种,如最常见的是项目新建窗体(Window)作为子窗体 ,或者新建wpf用户控件(UserControl).而其实利用Xceed.Wpf.Toolkit.dll 可以轻松布局如 ...

  4. C: define many functions using predefine..

    /* Defines COUNTER. There must be exactly one such definition at file scope * within a program. */ # ...

  5. sessionStorage用于分页，瀑布流和存储用户数据等

    在手机网页开发中,会用到分页和瀑布流来分量显示数据.这里会遇到一个问题.当点击某条数据进入详情后,再按手机的返回键会到上一个页面,该页面是重新加载的. 本人在微信里用内置的qq浏览器打开页面,wind ...

  6. html base1

    标题: 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的. <h1> 定义最大的标题.<h6> 定义最小的标题. 段落: < ...

  7. 最小生成树Prim

    首先解释什么是最小生成树,最小生成树是指在一张图中找出一棵树,任意两点的距离已经是最短的了. 算法要点: 1.用book数组存放访问过的节点. 2.用dis数组保存对应下标的点到树的最近距离,这里要注 ...

  8. Kyoto Cabinet--nosql型单机数据库

    摘要: Kyoto Cabinet是轻量级nosql型本地内存数据库 简介 Kyoto Cabinet是一个数据库管理的 lib,是 Tokyo Cabinet 的改进版本.数据库是一个简单的包含记录 ...

  9. 手机端android/iPhone问题

    iPhone: 不能自动播放音乐, 去除默认样式 input:-webkit-appearance: none;border-radius:0px; video播放自动默认全屏解决-webkit-pl ...

  10. discuz 添加板块失败解决办法

    最近把服务器环境升了下级,发现discuz后台添加栏目添加不了了,数据库没变,源代码没变,就突然添加不了了.刚开始添加1个板块成功了,再添加就怎么也添不进去了.只是页面刷新了一下,啥提示没有. 经过一 ...