溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關使用jQuery怎么實現一個左滑刪除按鈕，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
實現思路
為了說明我的實現思路，做了兩個圖來輔助說明。
首先，請看圖1。在圖中，我們設置每一行的寬度超過瀏覽器的寬度，其超出的部分就是放置按鈕的區域。由于超出了瀏覽器的最大寬度，因此按鈕區域此時是不可見的，只能顯示左側的常規信息部分。
圖1 普通狀態
接下來，我們監聽左側常規信息區域，監聽滑動事件（具體如何監聽先不考慮）。當我們監聽到左滑事件時，我們讓相應行左偏移，讓按鈕顯示出來，同時左側超出的部分被遮擋（請看圖2）。
圖2 左滑狀態
當我們右滑時，我們再讓相應行回復到左偏移為0的時候就行了。
關鍵實現方式
對于左滑和右滑，我們通過設定常規信息區域的marin-left來實現，當設定margin-left為負值時，實現左滑，當再次設定margin-left為0時，實現右滑。
對于滑動事件監聽，通過監聽鼠標（手指）按下和抬起來實現，根據兩點的X坐標的差值的正負判定是右滑還是左滑。
完整代碼
需要注意的是，我在測試的時候用的是chrome的普通模式和mobile模擬器模式，發現兩種模式下監聽是不一樣的，因此我寫了兩種監聽，這樣至少有一種會執行。也許有其他更好的適配方法，但不作為此處的重點。當然也歡迎大家賜教。
至于代碼部分，用了jQuery，其實不用也沒啥問題的，動畫滑動和監聽都可以用純js寫，但是由于這不是這里的重點，那么為什么不用jQuery呢？成功者站在巨人的肩膀上，而且咱也沒有jQuery寫的好 (。?`ω´?)
2015/11/13更新
有位同學提出說代碼在QQ手機瀏覽器和Opera手機瀏覽器等中沒有滑動效果，找了一下大概是帖子里說的原因，于是根據帖子里的提示以及那位同學的一個大神同學的提示，做了一下修改。主要是在touchmove事件中根據橫縱坐標位移來判斷是否阻止默認事件，如下：
// 橫向位移大于縱向位移，阻止縱向滾動
if (Math.abs(delta.x) > Math.abs(delta.y)) {
event.preventDefault();
}2016/02/25更新
qq_25558115同學提到：“如果再能給大家提供出只能有一條記錄可以左滑， 倘若滑動其他的記錄，則有左滑記錄的要回到原位”。于是進行了簡單實現。主要思路如下：
// 用一個變量記錄上一次左滑的對象
var lastLeftObj;
// 在左滑發生的時候，判定上一個左滑的對象是否存在，若存在，且不是當前被左滑的對象，則將其右滑
// 同時，記錄新的左滑對象
// 在右滑發生時，將上一個左滑對象清空
if (左滑) {
pressedObj左滑
lastLeftObj && lastLeftObj != pressedObj && lastLeftObj右滑
lastLeftObj = pressedObj; // 記錄上一個左滑的對象
} else if (右滑) {
pressedObj右滑
lastLeftObj = null; // 清空上一個左滑的對象
}2016/09/06更新
根據馬燦發同學提出的bug進行修改：
右滑時進行判斷，僅當要右滑的對象（pressedObj）是上一次左滑的對象（lastLeftObj）時才將對象右滑并清空lastLeftObj。
if (pressedObj == lastLeftObj) {...}根據girlyougo同學的提議，添加“在除本行外的其他區域點擊時均復位當前左滑按鈕”的功能。思路為在滑動結束時，判定pressedObj!=lastLeftObj，即可知點擊/滑動的對象為其他對象：
// 點擊除當前左滑對象之外的任意其他位置
if (lastLeftObj && pressedObj != lastLeftObj) {
$(lastLeftObj).animate({marginLeft:"0"}, 500); // 右滑
lastLeftObj = null; // 清空上一個左滑的對象
}實際上，在添加了上述功能之后，前面提到的bug不存在了。不過此處保留了消除bug的那部分代碼。
更新后的完整代碼如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>左劃出現刪除按鈕，右滑隱藏</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());
// 設定常規信息區域寬度=屏幕寬度
$(".line-normal-wrapper").width($(".line-wrapper").width());
// 設定文字部分寬度（為了實現文字過長時在末尾顯示...）
$(".line-normal-msg").width($(".line-normal-wrapper").width() - 280);
// 獲取所有行，對每一行設置監聽
var lines = $(".line-normal-wrapper");
var len = lines.length;
var lastX, lastXForMobile;
// 用于記錄被按下的對象
var pressedObj; // 當前左滑的對象
var lastLeftObj; // 上一個左滑的對象
// 用于記錄按下的點
var start;
// 網頁在移動端運行時的監聽
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); // 已經左滑狀態的按鈕右滑
lastLeftObj = pressedObj; // 記錄上一個左滑的對象
} else if (diffX > 150) {
if (pressedObj == lastLeftObj) {
$(pressedObj).animate({marginLeft:"0"}, 500); // 右滑
lastLeftObj = null; // 清空上一個左滑的對象
}
}
});
}
// 網頁在PC瀏覽器中運行時的監聽
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); // 已經左滑狀態的按鈕右滑
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怎么實現一個左滑刪除按鈕，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
