移動端水平滑動刪除程式碼例項
分享一段程式碼例項,它是比較常見的移動端的操作。
水平向左滑動就可以刪除元素,需要的朋友可以做一下參考。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" /> <meta name="format-detection" content="telephone=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <title>向左滑動刪除</title> <script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.js'></script> <style> .main01 { width: 100%; height: auto; margin: 0 auto; overflow: hidden; } .main01 ul li { position: relative; width: 100%; height: 3rem; line-height: 3rem; border-bottom: 1px solid #efefef; font-size: 1.3rem; -webkit-transform: translateX(0px); } .txt { padding-left: 1rem; width: 100%; box-sizing: border-box; } .del { position: absolute; top: 0; right: -4rem; width: 4rem; line-height: 3rem; height: 3rem; background: #F00; color: #FFF; text-align: center; } #more { text-align: center; line-height: 3rem; padding-top: 1rem; padding-bottom: 1rem; } #more a { width: 5rem; height: 3rem; line-height: 3rem; color: #FFF; background: #0C6; text-align: center; font-size: 1.3rem; display: inline-block; } </style> </head> <body> <div class="main01" id="hdlist"> <ul> <li class="list-li"><div class="txt">向左滑動刪除</div><div class="del">刪除</div></li> <li class="list-li"><div class="txt">向左滑動刪除</div><div class="del">刪除</div></li> <li class="list-li"><div class="txt">向左滑動刪除</div><div class="del">刪除</div></li> <li class="list-li" style="display:none"><div class="txt">向左滑動刪除</div><div class="del">刪除</div></li> <li style="display:none"><div class="txt">向左滑動刪除</div><div class="del">刪除</div></li> </ul> </div> </body> <script> window.addEventListener('load', function() { var initX; //觸控位置 var moveX; //滑動時的位置 var X = 0; //移動距離 var objX = 0; //目標物件位置 document.getElementById("hdlist").addEventListener('touchstart', function(event) { event.preventDefault(); var obj = event.target.parentNode; if (obj.className == "list-li") { initX = event.targetTouches[0].pageX; objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1; } if (objX == 0) { document.getElementById("hdlist").addEventListener('touchmove', function(event) { event.preventDefault(); var obj = event.target.parentNode; if (obj.className == "list-li") { moveX = event.targetTouches[0].pageX; X = moveX - initX; if (X >= 0) { obj.style.WebkitTransform = "translateX(" + 0 + "px)"; } else if (X < 0) { var l = Math.abs(X); obj.style.WebkitTransform = "translateX(" + -l + "px)"; if (l > 50) { l = 50; obj.style.WebkitTransform = "translateX(" + -l + "px)"; } } } }); } else if (objX < 0) { document.getElementById("hdlist").addEventListener('touchmove', function(event) { event.preventDefault(); var obj = event.target.parentNode; if (obj.className == "list-li") { moveX = event.targetTouches[0].pageX; X = moveX - initX; if (X >= 0) { var r = -50 + Math.abs(X); obj.style.WebkitTransform = "translateX(" + r + "px)"; if (r > 0) { r = 0; obj.style.WebkitTransform = "translateX(" + r + "px)"; } } else { //向左滑動 obj.style.WebkitTransform = "translateX(" + -50 + "px)"; } } }); } }) document.getElementById("hdlist").addEventListener('touchend', function(event) { event.preventDefault(); var obj = event.target.parentNode; if (obj.className == "list-li") { objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1; if (objX > -50) { obj.style.WebkitTransform = "translateX(" + 0 + "px)"; objX = 0; } else { obj.style.WebkitTransform = "translateX(" + -50 + "px)"; objX = -50; } } }) }) </script> </html>
相關文章
- 動態刪除和新增table行程式碼例項行程
- 頁面全屏垂直平滑滾動程式碼例項
- javascript動態刪除和新增表格行程式碼例項JavaScript行程
- 動態的新增或者刪除指定元素程式碼例項
- html元素的動態新增和刪除程式碼例項HTML
- js動態新增和刪除table表格行程式碼例項JS行程
- javascript動態刪除或者新增table表格行程式碼例項JavaScript行程
- js動態建立table表格和刪除指定行列程式碼例項JS
- 移動端div塊拖動效果程式碼例項
- 方向鍵控制元素移動程式碼例項
- 如何動態刪除css的偽物件選擇器程式碼例項CSS物件
- javascript刪除所有cookie例項程式碼JavaScriptCookie
- jquery刪除指定元素程式碼例項jQuery
- js刪除li元素程式碼例項JS
- javascript刪除字串中空格程式碼例項JavaScript字串
- jquery刪除指定子元素程式碼例項jQuery
- javascript刪除指定子元素程式碼例項JavaScript
- jQuery刪除html標籤程式碼例項jQueryHTML
- jQuery刪除表格指定行程式碼例項jQuery行程
- 原生js刪除節點程式碼例項JS
- 點選刪除表格行程式碼例項行程
- JavaScript刪除元素節點程式碼例項JavaScript
- jquery增加和刪除行程式碼例項jQuery行程
- javascript刪除或者新增option選項例項程式碼JavaScript
- 點選刪除按鈕刪除當前行程式碼例項行程
- 點選左右箭頭可以移動選項例項程式碼
- 移動端判斷觸屏位置程式碼例項
- 移動端字型大小自適應程式碼例項
- javascript刪除select下拉選單項程式碼例項JavaScript
- javascript刪除陣列指定值程式碼例項JavaScript陣列
- 刪除table表格行和列程式碼例項
- 正規表示式刪除空格程式碼例項
- 原生js刪除字串中空格程式碼例項JS字串
- javascript刪除字串重複字元程式碼例項JavaScript字串字元
- js刪除指定的li元素程式碼例項JS
- js刪除字串兩端空格程式碼例項JS字串
- 移動端頁面大小自適應程式碼例項
- 移動端上拉和下拉重新整理程式碼例項