本篇文章給大家分享的是有關使用jQuery怎么實現(xiàn)一個左滑刪除按鈕,小編覺得挺實用的,因此分享給大家學習,希望大家閱讀完這篇文章后可以有所收獲,話不多說,跟著小編一起來看看吧。
創(chuàng)新互聯(lián)主要從事成都網(wǎng)站建設、網(wǎng)站制作、網(wǎng)頁設計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務。立足成都服務棗莊,十年網(wǎng)站建設經(jīng)驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:028-86922220實現(xiàn)思路
為了說明我的實現(xiàn)思路,做了兩個圖來輔助說明。
首先,請看圖1。在圖中,我們設置每一行的寬度超過瀏覽器的寬度,其超出的部分就是放置按鈕的區(qū)域。由于超出了瀏覽器的大寬度,因此按鈕區(qū)域此時是不可見的,只能顯示左側(cè)的常規(guī)信息部分。
圖1 普通狀態(tài)
接下來,我們監(jiān)聽左側(cè)常規(guī)信息區(qū)域,監(jiān)聽滑動事件(具體如何監(jiān)聽先不考慮)。當我們監(jiān)聽到左滑事件時,我們讓相應行左偏移,讓按鈕顯示出來,同時左側(cè)超出的部分被遮擋(請看圖2)。
圖2 左滑狀態(tài)
當我們右滑時,我們再讓相應行回復到左偏移為0的時候就行了。
關鍵實現(xiàn)方式
對于左滑和右滑,我們通過設定常規(guī)信息區(qū)域的marin-left來實現(xiàn),當設定margin-left為負值時,實現(xiàn)左滑,當再次設定margin-left為0時,實現(xiàn)右滑。
對于滑動事件監(jiān)聽,通過監(jiān)聽鼠標(手指)按下和抬起來實現(xiàn),根據(jù)兩點的X坐標的差值的正負判定是右滑還是左滑。
完整代碼
需要注意的是,我在測試的時候用的是chrome的普通模式和mobile模擬器模式,發(fā)現(xiàn)兩種模式下監(jiān)聽是不一樣的,因此我寫了兩種監(jiān)聽,這樣至少有一種會執(zhí)行。也許有其他更好的適配方法,但不作為此處的重點。當然也歡迎大家賜教。
至于代碼部分,用了jQuery,其實不用也沒啥問題的,動畫滑動和監(jiān)聽都可以用純js寫,但是由于這不是這里的重點,那么為什么不用jQuery呢?成功者站在巨人的肩膀上,而且咱也沒有jQuery寫的好 (。?`ω´?)
2015/11/13更新
有位同學提出說代碼在QQ手機瀏覽器和Opera手機瀏覽器等中沒有滑動效果,找了一下大概是帖子里說的原因,于是根據(jù)帖子里的提示以及那位同學的一個大神同學的提示,做了一下修改。主要是在touchmove事件中根據(jù)橫縱坐標位移來判斷是否阻止默認事件,如下:
// 橫向位移大于縱向位移,阻止縱向滾動 if (Math.abs(delta.x) > Math.abs(delta.y)) { event.preventDefault(); }
2016/02/25更新
qq_25558115同學提到:“如果再能給大家提供出只能有一條記錄可以左滑, 倘若滑動其他的記錄,則有左滑記錄的要回到原位”。于是進行了簡單實現(xiàn)。主要思路如下:
// 用一個變量記錄上一次左滑的對象 var lastLeftObj; // 在左滑發(fā)生的時候,判定上一個左滑的對象是否存在,若存在,且不是當前被左滑的對象,則將其右滑 // 同時,記錄新的左滑對象 // 在右滑發(fā)生時,將上一個左滑對象清空 if (左滑) { pressedObj左滑 lastLeftObj && lastLeftObj != pressedObj && lastLeftObj右滑 lastLeftObj = pressedObj; // 記錄上一個左滑的對象 } else if (右滑) { pressedObj右滑 lastLeftObj = null; // 清空上一個左滑的對象 }
2016/09/06更新
根據(jù)馬燦發(fā)同學提出的bug進行修改:
右滑時進行判斷,僅當要右滑的對象(pressedObj)是上一次左滑的對象(lastLeftObj)時才將對象右滑并清空lastLeftObj。
if (pressedObj == lastLeftObj) {...}
根據(jù)girlyougo同學的提議,添加“在除本行外的其他區(qū)域點擊時均復位當前左滑按鈕”的功能。思路為在滑動結束時,判定pressedObj!=lastLeftObj,即可知點擊/滑動的對象為其他對象:
// 點擊除當前左滑對象之外的任意其他位置 if (lastLeftObj && pressedObj != lastLeftObj) { $(lastLeftObj).animate({marginLeft:"0"}, 500); // 右滑 lastLeftObj = null; // 清空上一個左滑的對象 }
實際上,在添加了上述功能之后,前面提到的bug不存在了。不過此處保留了消除bug的那部分代碼。
更新后的完整代碼如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>左劃出現(xiàn)刪除按鈕,右滑隱藏</title> <script type="text/javascript" src="jquery-1.11.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(e) { // 設定每一行的寬度=屏幕寬度+按鈕寬度 $(".line-scroll-wrapper").width($(".line-wrapper").width() + $(".line-btn-delete").width()); // 設定常規(guī)信息區(qū)域?qū)挾?屏幕寬度 $(".line-normal-wrapper").width($(".line-wrapper").width()); // 設定文字部分寬度(為了實現(xiàn)文字過長時在末尾顯示...) $(".line-normal-msg").width($(".line-normal-wrapper").width() - 280); // 獲取所有行,對每一行設置監(jiān)聽 var lines = $(".line-normal-wrapper"); var len = lines.length; var lastX, lastXForMobile; // 用于記錄被按下的對象 var pressedObj; // 當前左滑的對象 var lastLeftObj; // 上一個左滑的對象 // 用于記錄按下的點 var start; // 網(wǎng)頁在移動端運行時的監(jiān)聽 for (var i = 0; i < len; ++i) { lines[i].addEventListener('touchstart', function(e){ lastXForMobile = e.changedTouches[0].pageX; pressedObj = this; // 記錄被按下的對象 // 記錄開始按下時的點 var touches = event.touches[0]; start = { x: touches.pageX, // 橫坐標 y: touches.pageY // 縱坐標 }; }); lines[i].addEventListener('touchmove',function(e){ // 計算劃動過程中x和y的變化量 var touches = event.touches[0]; delta = { x: touches.pageX - start.x, y: touches.pageY - start.y }; // 橫向位移大于縱向位移,阻止縱向滾動 if (Math.abs(delta.x) > Math.abs(delta.y)) { event.preventDefault(); } }); lines[i].addEventListener('touchend', function(e){ if (lastLeftObj && pressedObj != lastLeftObj) { // 點擊除當前左滑對象之外的任意其他位置 $(lastLeftObj).animate({marginLeft:"0"}, 500); // 右滑 lastLeftObj = null; // 清空上一個左滑的對象 } var diffX = e.changedTouches[0].pageX - lastXForMobile; if (diffX < -150) { $(pressedObj).animate({marginLeft:"-132px"}, 500); // 左滑 lastLeftObj && lastLeftObj != pressedObj && $(lastLeftObj).animate({marginLeft:"0"}, 500); // 已經(jīng)左滑狀態(tài)的按鈕右滑 lastLeftObj = pressedObj; // 記錄上一個左滑的對象 } else if (diffX > 150) { if (pressedObj == lastLeftObj) { $(pressedObj).animate({marginLeft:"0"}, 500); // 右滑 lastLeftObj = null; // 清空上一個左滑的對象 } } }); } // 網(wǎng)頁在PC瀏覽器中運行時的監(jiān)聽 for (var i = 0; i < len; ++i) { $(lines[i]).bind('mousedown', function(e){ lastX = e.clientX; pressedObj = this; // 記錄被按下的對象 }); $(lines[i]).bind('mouseup', function(e){ if (lastLeftObj && pressedObj != lastLeftObj) { // 點擊除當前左滑對象之外的任意其他位置 $(lastLeftObj).animate({marginLeft:"0"}, 500); // 右滑 lastLeftObj = null; // 清空上一個左滑的對象 } var diffX = e.clientX - lastX; if (diffX < -150) { $(pressedObj).animate({marginLeft:"-132px"}, 500); // 左滑 lastLeftObj && lastLeftObj != pressedObj && $(lastLeftObj).animate({marginLeft:"0"}, 500); // 已經(jīng)左滑狀態(tài)的按鈕右滑 lastLeftObj = pressedObj; // 記錄上一個左滑的對象 } else if (diffX > 150) { if (pressedObj == lastLeftObj) { $(pressedObj).animate({marginLeft:"0"}, 500); // 右滑 lastLeftObj = null; // 清空上一個左滑的對象 } } }); } }); </script> <style type="text/css"> * { margin: 0; padding: 0; } .line-wrapper { width: 100%; height: 144px; overflow: hidden; font-size: 28px; border-bottom: 1px solid #aaa; } .line-scroll-wrapper { white-space: nowrap; height: 144px; clear: both; } .line-btn-delete { float: left; width: 132px; height: 144px; } .line-btn-delete button { width: 100%; height: 100%; background: red; border: none; font-size: 24px; font-family: 'Microsoft Yahei'; color: #fff; } .line-normal-wrapper { display: inline-block; line-height: 100px; float: left; padding-top: 10px; padding-bottom: 10px; } .line-normal-icon-wrapper { float: right; width: 120px; height: 120px; margin-right: 12px; } .line-normal-icon-wrapper img { width: 120px; height: 120px; } .line-normal-avatar-wrapper { width: 100px; height: 124px; float: left; margin-left: 12px; } .line-normal-avatar-wrapper img { width: 92px; height: 92px; border-radius: 60px; } .line-normal-left-wrapper { float: left; overflow: hidden; } .line-normal-info-wrapper { float: left; margin-left: 10px; } .line-normal-user-name { height: 28px; line-height: 28px; color: #4e4e4e; margin-top: 7px; } .line-normal-msg { height: 28px; line-height: 28px; overflow:hidden; text-overflow:ellipsis; color: #4e4e4e; margin-top: 11px; } .line-normal-time { height: 28px; line-height: 28px; color: #999; margin-top: 11px; } </style> </head> <body> <div class="line-wrapper"> <div class="line-scroll-wrapper"> <div class="line-normal-wrapper"> <div class="line-normal-left-wrapper"> <div class="line-normal-avatar-wrapper"><img src="1.jpg" /></div> <div class="line-normal-info-wrapper"> <div class="line-normal-user-name">蠟筆小新</div> <div class="line-normal-msg">在同行的小伙伴中提到了你</div> <div class="line-normal-time">1分鐘前</div> </div> </div> <div class="line-normal-icon-wrapper"><img src="5.jpg"/></div> </div> <div class="line-btn-delete"><button>刪除</button></div> </div> </div> <div class="line-wrapper"> <div class="line-scroll-wrapper"> <div class="line-normal-wrapper"> <div class="line-normal-left-wrapper"> <div class="line-normal-avatar-wrapper"><img src="2.jpg" /></div> <div class="line-normal-info-wrapper"> <div class="line-normal-user-name">喬巴</div> <div class="line-normal-msg">你看不到我哦</div> <div class="line-normal-time">1分鐘前</div> </div> </div> <div class="line-normal-icon-wrapper"><img src="6.jpg"/></div> </div> <div class="line-btn-delete"><button>刪除</button></div> </div> </div> <div class="line-wrapper"> <div class="line-scroll-wrapper"> <div class="line-normal-wrapper"> <div class="line-normal-left-wrapper"> <div class="line-normal-avatar-wrapper"><img src="3.jpg" /></div> <div class="line-normal-info-wrapper"> <div class="line-normal-user-name">賤行賤遠</div> <div class="line-normal-msg">回憶里想起模糊的小時候,云朵漂浮在藍藍的天空,那時的你說,要和我手牽手,一起走到時間的盡頭</div> <div class="line-normal-time">1分鐘前</div> </div> </div> <div class="line-normal-icon-wrapper"><img src="7.jpg"/></div> </div> <div class="line-btn-delete"><button>刪除</button></div> </div> </div> <div class="line-wrapper"> <div class="line-scroll-wrapper"> <div class="line-normal-wrapper"> <div class="line-normal-left-wrapper"> <div class="line-normal-avatar-wrapper"><img src="4.png" /></div> <div class="line-normal-info-wrapper"> <div class="line-normal-user-name">小黃人</div> <div class="line-normal-msg">哈哈哈哈哈……暑假來看小黃人電影哦~哈哈哈……</div> <div class="line-normal-time">1分鐘前</div> </div> </div> <div class="line-normal-icon-wrapper"><img src="8.jpg"/></div> </div> <div class="line-btn-delete"><button>刪除</button></div> </div> </div> </body> </html>
以上就是使用jQuery怎么實現(xiàn)一個左滑刪除按鈕,小編相信有部分知識點可能是我們?nèi)粘9ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學到更多知識。更多詳情敬請關注創(chuàng)新互聯(lián)成都網(wǎng)站設計公司行業(yè)資訊頻道。
另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應用場景需求。
分享標題:使用jQuery怎么實現(xiàn)一個左滑刪除按鈕-創(chuàng)新互聯(lián)
網(wǎng)頁網(wǎng)址:http://muchs.cn/article28/pcdjp.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站設計公司、移動網(wǎng)站建設、虛擬主機、網(wǎng)站導航、網(wǎng)站制作、微信小程序
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容