移动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. IOS抓包工具paros的使用

    一,环境安装,软件安装 1.下载安装java JDK for Mac,可以从Oracle官网下载(但是一般Oracle的都是最新的版本的),或者从苹果的开发者网站下载,我是从苹果官网下载的javafo ...

  2. cakephp2.3.0 lib中的Model.php有一个bug

    1. cakephp2.3.0 lib中的Model.php有一个bug, 加上 !empty($db->config['prefix']) 这个判断更好.有时候会少进行一次 new PDO() ...

  3. java中怎么解决路径中文的问题

    在我遇到精灵线程的问题时,遇到一个中文路径的问题 原来是这样的 URL url=Test8.class.getClassLoader().getResource(""); Stri ...

  4. div+css网页本地上和上传到服务器后在IE11上看到的效果不一样？

    div+css网页本地上和上传到服务器后在IE11上看到的效果不一样? 解决办法在html的head里加上一段:<meta http-equiv="X-UA-Compatible&qu ...

  5. HDU 1540<线段树，区间并>

    题目连接 参考 题意: 维护各个点的连续的最大连续长度. 思路: 主要是维护一个区间的三个变量ll,f[i].l为起点向右的最大连续 长度,rl:f[i].r为起点向左的最大连续长度,ml:[l,r] ...

  6. php 批量导入数据的一种思维

    <?php $str="风湿免疫科 消化内科 内分泌科 神经内科 感染内科 心血管内科放疗中心";$arr=explode(' ',$str);$sql="&quo ...

  7. web配置文件的<load-on-startup>0</load-on-startup>

    在servlet的配置当中,<load-on-startup>5</load-on-startup>的含义是:标记容器是否在启动的时候就加载这个servlet.当值为0或者大于 ...

  8. sqlserver 2008 查看表描述，和表结构

    sp_help sys_user sp_columns   sys_user --表结构 THEN obj.name ELSE '' END AS 表名, col.colorder AS 序号 , c ...

  9. Java 堆内存(Heap)[转]

    将jvm内存很不错的文章,转自 堆(Heap)又被称为:优先队列(Priority Queue),是计算机科学中一类特殊的数据结构的统称.堆通常是一个可以被看做一棵树的数组对象.在队列中,调度程序反复 ...

  10. [转]Linux下CodeBlocks的交叉编译

    原文链接:http://blog.sina.com.cn/s/blog_602f87700100kujh.html Sam一直是Makefile流,这些天需要移植一些游戏引擎模块.这些模块在其它嵌入式 ...