当前位置：首页 > 资讯 > 技术文档

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

时间：2020-08-08 00:36 编辑：来源：阅读：
扫一扫，手机访问

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

[b]原理：[/b]删除的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的右滑删除效果的实现方法全部内容了，希望大家多多支持编程素材网~

全部评论(0)

上一篇：JS简单实现无缝滚动效果实例
下一篇：DataGridView控件显示行号的正确代码及分析

资讯排行榜
更多>>