移动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. Object.setPrototypeOf 方法的使用

    将一个指定的对象的原型设置为另一个对象或者null(既对象的[[Prototype]]内部属性). 语法 Object.setPrototypeOf(obj, prototype) 参数 obj 将被 ...

  2. ASP MVC之参数传递

    1.URL获取参数  Request.QueryString["XqType"]; 2.表单提交,control层获取参数:Request.Form["XXX" ...

  3. 火狐解决OCSP回应包含过期信息的问题

    连接 addons.mozilla.org 时发生错误. OCSP 回应包含过期信息. (错误码: sec_error_ocsp_old_response)hosts文件添加 vi /etc/host ...

  4. 【转】关于C execlp函数的理解

    转自:http://bachue.is-programmer.com/posts/21611.html execlp(从PATH 环境变量中查找文件并执行) 相关函数 fork,execl,execl ...

  5. 2016-3-6.16:43------------js开始

    -------------------------------------------------------------------

  6. mplayer最全的命令

    前段时间做过qt内嵌mplayer的一个小程序,感觉mplayer还行不过不支持打开图片感觉有点无力.话不多说上代码: QString path="d:/1.mkv"; QWidg ...

  7. 学习笔记——装饰器模式Decorator

    装饰器模式,最典型的例子. 工厂新开了流水线,生产了手机外壳,蓝天白云花色.刚准备出厂,客户说还要印奶牛在上面,WTF…… 时间上来不及,成本也不允许销毁了重来,怎么办?弄来一机器A,专门在蓝天白云的 ...

  8. 如何参与Hibernate-ORM项目

    1.注册 hibernate jira账户,hibernate中的issue和bug都会在此论坛发布 注册地址:https://hibernate.onjira.com 2.创建Hibernate-O ...

  9. 报错：error C2229: class ' ' has an illegal zero-sized array 引发的思考

    问题:

  10. HTML的TextArea标记跟随文本内容自动设置高度

    js <textarea name="textarea" id="textarea" style='overflow-y: hidden;height:2 ...