移动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. lvs + keepalived + httpd 高可用集群（转）

    实验信息和拓扑:备注:Centos 6.5 selinux –disabled iptables off ServerName Ipaddress information LVSMaster 172. ...

  2. 二分三角形的时候尤其需要注意！！！ HDU 5115 二分+模拟

    题目大意:http://blog.csdn.net/snowy_smile/article/details/49535301 思路:分类讨论,分别在[1,2].(2,3).[3,4).[4,1]相遇, ...

  3. java实现类似qq的窗口对聊

    Swing实现界面,socket实现通信 package com.learn.talk; import java.awt.BorderLayout; import java.awt.Dimension ...

  4. dsplay:table页面合并表格

    在实际项目中经常会遇到合并表格的情形,现在我将自己合并的方法写出来,供大家教参一下,顺便自己也作个备忘. <%@ page language="java" contentTy ...

  5. 【转】linux grep命令详解

    简介 grep (global search regular expression(RE) and print out the line,全面搜索正则表达式并把行打印出来)是一种强大的文本搜索工具,它 ...

  6. 50条规则提高PHP开发提高效率技巧

    0.用单引号代替双引号来包含字符串,这样做会更快一些.因为PHP会在双引号包围的字符串中搜寻变量,单引号则不会,注意:只有echo能这么做,它是一种可以把多个字符串当作 参数的“函数”(译注:PHP手 ...

  7. 文本格式ANSI,Unicode等有什么区别

    首先DBCS是亚洲的字符集,包含了ANSI,ANSI也就是ASCII值为0-255之间的字符,当字符为ANSI时,存放于文件中占用的是一个字节.如果是非ANSI的呢,则占用两字节.用VB的ASC函数可 ...

  8. c# 去除文本的html标签

    public static string ContentReplace(string input) { input = Regex.Replace(input, @"<(.[^> ...

  9. startActivityForResult与onActivityResult

    androidActivity之间的跳转不只是有startActivity(Intent i)的,startActivityForResult(Intent intent, int requestCo ...

  10. rabbitmq用于分布式系统

    上文介绍了RabbitMQ在linux下的安装,这里就简单的介绍一下基于RabbitMQ的开发.RabbitMQ已经提供了一大坨材料. Java – http://www.RabbitMQ.com/j ...