<%@ 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+"/"; %> Meta charset="UTF-8">

<script src="assets/wap/kuaiqin/js/jquery-2.1.1.min.js" type="text/javascript"&gt;</script>
<script src="assets/wap/kuaiqin/js/jl.js" type="text/javascript"&gt;</script>



<style>
    *{
        margin:0px;
        padding: 0px;
        font-size: 14px;
        <a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>-sizing: border-<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>;
    }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-<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>{
        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>

<div id="header"&gt;
    <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"&gt;
    小纸条
</div>
<div id="list"&gt;

    <div class="blank"&gt;</div>

    <ul id="myf"&gt;
         <li class="myfriend" data-friendid="" id="del"&gt;
            <img src="" class="img-<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>"&gt;
            <p style="line-height: 40px;"&gt;
                <span class="right time" id=""&gt;</span>
            </p>
            <p style="line-height: 20px;" id=""&gt;uu</p>
            <span class="delfriend" ><a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a></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",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){//向右滑动,<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>好友
            $(".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;
}
}
});