类似于QQ的右滑删除效果的实现方法


Posted in Javascript onOctober 16, 2016

原理:删除的div在窗口的外面,用户看不到,用户右滑,显示次div

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
	<base href="<%=basePath%>">
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=no" />
	<title>小纸条</title>
	
	<script src="assets/wap/kuaiqin/js/jquery-2.1.1.min.js" type="text/javascript"></script>
	<script src="assets/wap/kuaiqin/js/jl.js" type="text/javascript"></script>
	
	
	
	<style>
		*{
			margin:0px;
			padding: 0px;
			font-size: 14px;
			box-sizing: border-box;
		}body{overflow: hidden;width:100%;height:100%;}
		#list{
			border-top:1px solid #e6e6e6;
		}
		ul li{
			list-style-type: none;
			width: 100%;
			height:60px;
			position: relative;
			border-bottom:1px solid #e6e6e6;
		}
		div#header{
			width: 100%;
			height:45px;
			text-align: center;
			line-height: 45px;
			border-bottom:1px solid #e6e6e6;
			margin-bottom: 10px;
		}
		li p{
			height:30px;
			margin-left: 75px;
		}
		.right{float: right;}
		.time{margin-right: 24px;display:none;border-radius:50%;width:15px;height:15px;background-color:red;margin-top:20px;font-size:13px;text-align:center;line-height:15px;color:white;}

		.img-box{
			width:40px;height:40px;margin:10px 0px 10px 24px;position:absolute;
		}
		.blank{width:100%;height:15px;}
		.delfriend{height:60px;width:70px;background-color:red;display:block;position:absolute;top:0px;right:-70px;line-height:60px;color:#ffffff;text-align:center;z-index:13}
	</style>
</head>
<body>

<script>
	var w=$(window).width()+"px";
	var h=$(window).height()+"px";
	$("body").css({"width":w,"height":h});
</script>

	<div id="header">
		<img src="assets/wap/kuaiqin/img/return.png" style="position:absolute;top:5px;left:5px;z-index:100;width:10px;height:18px;margin-top:5px;" onclick="window.location.href= 'wap/kuaiqin/index';return false">
		小纸条
	</div>
	<div id="list">
		
		<div class="blank"></div>
			
		<ul id="myf">
			 <li class="myfriend" data-friendid="" id="del">
				<img src="" class="img-box">
				<p style="line-height: 40px;">
					<span class="right time" id=""></span>
				</p>
				<p style="line-height: 20px;" id="">uu</p>
				<span class="delfriend" >删除</span>
			</li> 
		</ul>
	</div>
	
	


	<script>
	
		 $("#myf").unbind().on("touchstart",".myfriend",function (e) {
	      e.preventDefault();
	      var _a= e.originalEvent.targetTouches[0];
	      start=_a.pageX; 
	      friendid=$(this).attr("data-friendid");
	   }).on("touchend",".myfriend", function (e) {
	      e.preventDefault();
	      var _a= e.originalEvent.changedTouches[0];
	      end=_a.pageX;
	      	if(start-end<0){
	      		$("#del_"+friendid).animate({"margin-left":"0px"},1000);     
	      	}else if(start-end>0){//向右滑动,删除好友
	      		$(".myfriend").not("#del_"+friendid).animate({"margin-left":"0px"},1000); 
	      		$("#del_"+friendid).animate({"margin-left":"-70px"},1000);		
	      	}else{
	      		var cls=$(e.target).attr("data-cls");
		      	console.log(cls);
		      	var ff=$(e.target).attr("data-friendid");
		      	if(cls=="delfriend")delfriend(ff);
		      	else{
						window.location="wap/kuaiqin/sr_index?smallmy="+localStorage.tokenforkuaiqin+"&friendid="+friendid;
		      	}
	      	}
	   });
		 
		 
  </script>
</body>
</html>

以上就是小编为大家带来的类似于QQ的右滑删除效果的实现方法全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
JavaScript动态操作表格实例(添加,删除行,列及单元格)
Nov 25 Javascript
jQuery中hover与mouseover和mouseout的区别分析
Dec 24 Javascript
AngularJS手动表单验证
Feb 01 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
Jun 07 Javascript
javascript类型系统_正则表达式RegExp类型详解
Jun 24 Javascript
js实现返回顶部效果
Mar 10 Javascript
详解在AngularJS的controller外部直接获取$scope
Jun 02 Javascript
Node层模拟实现multipart表单的文件上传示例
Jan 02 Javascript
用ES6写全屏滚动插件的示例代码
May 02 Javascript
简化版的vue-router实现思路详解
Oct 19 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
Jun 17 Javascript
关于vue中如何监听数组变化
Apr 28 Vue.js
js实现点击图片自动提交action的简单方法
Oct 16 #Javascript
jQuery监听文件上传实现进度条效果的方法
Oct 16 #Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
Oct 16 #Javascript
利用jQuery对无序列表排序的简单方法
Oct 16 #Javascript
JS实现动态增加和删除li标签行的实例代码
Oct 16 #Javascript
js利用appendChild对标签进行排序的实现方法
Oct 16 #Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
Oct 16 #Javascript
You might like
《PHP边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
PHP数据库表操作的封装类及用法实例详解
2016/07/12 PHP
php框架CI(codeigniter)自动加载与自主创建对象操作实例分析
2020/06/06 PHP
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
JQuery入门——事件切换之hover()方法应用介绍
2013/02/05 Javascript
js中的this关键字详解
2013/09/25 Javascript
js获取checkbox值的方法
2015/01/28 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
2015/03/26 Javascript
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
js生成随机数的过程解析
2015/11/24 Javascript
移动端横屏的JS代码(beta)
2016/05/16 Javascript
Jquery和JS获取ul中li标签的实现方法
2016/06/02 Javascript
正则表达式,替换所有HTML标签的简单实例
2016/11/28 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
vue.js将unix时间戳转换为自定义时间格式
2017/01/03 Javascript
JS中input表单隐藏域及其使用方法
2017/02/13 Javascript
javascript实现秒表计时器的制作方法
2017/02/16 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
2017/02/22 Javascript
Angular实现图片裁剪工具ngImgCrop实践
2017/08/17 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
2017/10/09 Javascript
webstorm添加*.vue文件支持
2018/05/08 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
详解javascript函数写法大全
2019/03/25 Javascript
前端深入理解Typescript泛型概念
2020/03/09 Javascript
php使用递归与迭代实现快速排序示例
2014/01/23 Python
python通过opencv实现批量剪切图片
2017/11/13 Python
python实现KNN分类算法
2019/10/16 Python
python主线程与子线程的结束顺序实例解析
2019/12/17 Python
基于html和CSS3制作酷炫的导航栏
2015/09/23 HTML / CSS
Algenist奥杰尼官网:微藻抗衰老护肤品牌
2017/07/15 全球购物
超级英雄、电影和电视、乐队和音乐T恤:Loud Clothing
2019/09/01 全球购物
Java语言程序设计测试题判断题部分
2013/01/06 面试题
教研活动总结
2014/04/28 职场文书
学校班子个人对照检查材料思想汇报
2014/09/27 职场文书
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript
Mysql 一主多从的部署
2022/05/20 MySQL