类似于QQ的右滑删除效果的实现方法
更新时间：2016年10月16日 10:52:29 投稿：jingxian
下面小编就为大家带来一篇类似于QQ的右滑删除效果的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
原理：删除的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的右滑删除效果的实现方法全部内容了，希望大家多多支持脚本之家~
相关文章
最近在搞一个AJAX的小功能，目的是用浮动div框显示当前鼠标下控件的详细信息，其中获得鼠标位置这块害得我走了很多冤枉路，因为压根没有想到我下面提到的第二点的区别，所以我的页面出来总是找不到我之前定义的那个div2008-11-11
这篇文章主要介绍了JavaScript不刷新实现浏览器的前进后退功能,本文给出了HTML5解决方案、老旧浏览器的写法等方法,需要的朋友可以参考下2014-11-11
虽然很少会遇到给bind返回的函数做new操作的场景，但面试中还是会涉及到的，所以本文将实现一下兼容new操作的bind写法，顺便学习一下new操作符，需要的可以参考一下2022-07-07
下面小编就为大家分享一篇webpack-dev-server自动更新页面方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了 Jasper的自动检测实现的机制比较简单，依靠某后台线程不断检测JSP文件与编译后的class文件的最后修改时间是否相同，若相同则认为没有改动，但倘若不同则需要重新编译,需要的朋友可以参考下2016-12-12
这篇文章主要为大家详细介绍了JavaScript瀑布流的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
这篇文章主要介绍了Bootstrap模态对话框用法,结合实例形式分析了Bootstrap模态对话框的简单创建与使用操作技巧,需要的朋友可以参考下2018-08-08
获取图片尺寸(不设置宽高)及放大图片：利用了IE的私有属性防止图片放大失真严重！感兴趣的朋友可以参考下2013-09-09
关于String对象的replace使用详解,需要的朋友可以参考下。2011-05-05
这篇文章主要给大家介绍了关于ECharts地图绘制和钻取简易接口的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用ECharts具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-07-07
最新评论