移动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. connectVisualVMtoTomcat

    connectVisualVMtoTomcat 抱ラ花瘠 荬捻怵 鞅讣囚 骝珈 名诡氩 祉逦戳阜 骚须ⅳ 破竹的从骑士的肩甲出切了下去嚓 闼原 奇荛糠 社獭池 杨叔你养的这些望月螓 ...

  2. perl中调用cgi

    来源: http://www.cnblogs.com/itech/archive/2012/09/23/2698856.html 参考:http://www.willmaster.com/librar ...

  3. web开发在线调试

    来源: http://www.cnblogs.com/itech/archive/2012/09/23/2698754.html 通常我们开发web时候,使用ie的developertoolgs,或c ...

  4. Django 用户认证及OneToOneField

    Django 用户认证如果自己不想写 就可以用django自带的认证 首选导入模块 models.py #!/usr/bin/env python #_*_ coding:utf8 _*_ from ...

  5. ExceL转PDF

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using Excel = ...

  6. 转 linux下xargs命令用法详解

    xargs在linux中是个很有用的命令,它经常和其他命令组合起来使用,非常的灵活. xargs是给命令传递参数的一个过滤器,也是组合多个命令的一个工具.它把一个数据流分割为一些足够小的块,以方便过滤 ...

  7. remote staspack

    输入文件:$HOME/utility/statspack11g/statspack.env, $HOME/utility/statspack11g/dblist,$HOME/utility/stats ...

  8. 浅谈SQL Server 对于内存的管理

    简介 理解SQL Server对于内存的管理是对于SQL Server问题处理和性能调优的基本,本篇文章讲述SQL Server对于内存管理的内存原理. 二级存储(secondary storage) ...

  9. Spring Boot 系列教程9-swagger-前后端分离后的标准

    前后端分离的必要 现在的趋势发展,需要把前后端开发和部署做到真正的分离 做前端的谁也不想用Maven或者Gradle作为构建工具 做后端的谁也不想要用Grunt或者Gulp作为构建工具 前后端需要通过 ...

  10. 2014 Shanghai Invitation Contest

    题目链接 http://acm.hdu.edu.cn/search.php?field=problem&key=2014%C9%CF%BA%A3%C8%AB%B9%FA%D1%FB%C7%EB ...