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

最新推荐文章于 2021-05-31 01:21:05 发布
weixin_33670713
最新推荐文章于 2021-05-31 01:21:05 发布
阅读量183
点赞数
文章标签： java javascript ViewUI
原文链接：http://www.cnblogs.com/snowlove/p/6067618.html
版权
原理：删除的div在窗口的外面，用户看不到，用户右滑，显示次div

100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
 
           <%@ 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;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;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>