類(lèi)似于QQ的右滑刪除效果的實(shí)現(xiàn)方法
原理:刪除的div在窗口的外面,用戶(hù)看不到,用戶(hù)右滑,顯示次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){//向右滑動(dòng),刪除好友 $(".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>
以上就是小編為大家?guī)?lái)的類(lèi)似于QQ的右滑刪除效果的實(shí)現(xiàn)方法全部?jī)?nèi)容了,希望大家多多支持腳本之家~
相關(guān)文章
JS使用正則表達(dá)式驗(yàn)證身份證號(hào)碼
這篇文章主要介紹了JS使用正則表達(dá)式驗(yàn)證身份證號(hào)碼的相關(guān)資料,需要的朋友可以參考下2017-06-06簡(jiǎn)單快速的實(shí)現(xiàn)js計(jì)算器功能
這篇文章主要教大家如何快速簡(jiǎn)單的實(shí)現(xiàn)js計(jì)算器功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08uniapp禁止遮罩層下頁(yè)面滾動(dòng)的解決方法
在uniapp的開(kāi)發(fā)中用過(guò)彈窗的都知道有個(gè)bug就是滑動(dòng)彈窗的內(nèi)容底部頁(yè)面也會(huì)跟著滑動(dòng),所以這篇文章主要給大家介紹了關(guān)于uniapp禁止遮罩層下頁(yè)面滾動(dòng)的解決方法,需要的朋友可以參考下2023-09-09ECharts事件處理與旭日?qǐng)D實(shí)現(xiàn)
這篇文章介紹了ECharts事件處理與實(shí)現(xiàn)旭日?qǐng)D的方法,文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-06-06js綜合應(yīng)用實(shí)例簡(jiǎn)單的表格統(tǒng)計(jì)
在做調(diào)查問(wèn)卷的過(guò)程中,遇到一個(gè)表格的統(tǒng)計(jì)問(wèn)題,一個(gè)需要用到j(luò)s方面的綜合知識(shí),感覺(jué)還不錯(cuò)所以記錄下來(lái)與大家分享,感興趣的朋友可以了解下2013-09-09獲取URL地址中的文件名和參數(shù)的javascript代碼
JS 獲取URL地址中的文件名和參數(shù),這個(gè)版本中有詳細(xì)的注釋。2009-09-09