使用jQuery怎么實(shí)現(xiàn)一個(gè)左滑刪除按鈕-創(chuàng)新互聯(lián)

本篇文章給大家分享的是有關(guān)使用jQuery怎么實(shí)現(xiàn)一個(gè)左滑刪除按鈕，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

創(chuàng)新互聯(lián)主要從事成都網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)棗莊,十年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):028-86922220

實(shí)現(xiàn)思路

為了說明我的實(shí)現(xiàn)思路，做了兩個(gè)圖來輔助說明。

首先，請看圖1。在圖中，我們設(shè)置每一行的寬度超過瀏覽器的寬度，其超出的部分就是放置按鈕的區(qū)域。由于超出了瀏覽器的大寬度，因此按鈕區(qū)域此時(shí)是不可見的，只能顯示左側(cè)的常規(guī)信息部分。

使用jQuery怎么實(shí)現(xiàn)一個(gè)左滑刪除按鈕

圖1 普通狀態(tài)

接下來，我們監(jiān)聽左側(cè)常規(guī)信息區(qū)域，監(jiān)聽滑動事件（具體如何監(jiān)聽先不考慮）。當(dāng)我們監(jiān)聽到左滑事件時(shí)，我們讓相應(yīng)行左偏移，讓按鈕顯示出來，同時(shí)左側(cè)超出的部分被遮擋（請看圖2）。

使用jQuery怎么實(shí)現(xiàn)一個(gè)左滑刪除按鈕

圖2 左滑狀態(tài)

當(dāng)我們右滑時(shí)，我們再讓相應(yīng)行回復(fù)到左偏移為0的時(shí)候就行了。

關(guān)鍵實(shí)現(xiàn)方式

對于左滑和右滑，我們通過設(shè)定常規(guī)信息區(qū)域的marin-left來實(shí)現(xiàn)，當(dāng)設(shè)定margin-left為負(fù)值時(shí)，實(shí)現(xiàn)左滑，當(dāng)再次設(shè)定margin-left為0時(shí)，實(shí)現(xiàn)右滑。

對于滑動事件監(jiān)聽，通過監(jiān)聽鼠標(biāo)（手指）按下和抬起來實(shí)現(xiàn)，根據(jù)兩點(diǎn)的X坐標(biāo)的差值的正負(fù)判定是右滑還是左滑。

完整代碼

需要注意的是，我在測試的時(shí)候用的是chrome的普通模式和mobile模擬器模式，發(fā)現(xiàn)兩種模式下監(jiān)聽是不一樣的，因此我寫了兩種監(jiān)聽，這樣至少有一種會執(zhí)行。也許有其他更好的適配方法，但不作為此處的重點(diǎn)。當(dāng)然也歡迎大家賜教。

至于代碼部分，用了jQuery，其實(shí)不用也沒啥問題的，動畫滑動和監(jiān)聽都可以用純js寫，但是由于這不是這里的重點(diǎn)，那么為什么不用jQuery呢？成功者站在巨人的肩膀上，而且咱也沒有jQuery寫的好 (。?`ω´?)

2015/11/13更新

有位同學(xué)提出說代碼在QQ手機(jī)瀏覽器和Opera手機(jī)瀏覽器等中沒有滑動效果，找了一下大概是帖子里說的原因，于是根據(jù)帖子里的提示以及那位同學(xué)的一個(gè)大神同學(xué)的提示，做了一下修改。主要是在touchmove事件中根據(jù)橫縱坐標(biāo)位移來判斷是否阻止默認(rèn)事件，如下：

// 橫向位移大于縱向位移，阻止縱向滾動
if (Math.abs(delta.x) > Math.abs(delta.y)) {
  event.preventDefault();
}

2016/02/25更新

qq_25558115同學(xué)提到：“如果再能給大家提供出只能有一條記錄可以左滑，倘若滑動其他的記錄，則有左滑記錄的要回到原位”。于是進(jìn)行了簡單實(shí)現(xiàn)。主要思路如下：

// 用一個(gè)變量記錄上一次左滑的對象
var lastLeftObj;

// 在左滑發(fā)生的時(shí)候，判定上一個(gè)左滑的對象是否存在，若存在，且不是當(dāng)前被左滑的對象，則將其右滑
// 同時(shí)，記錄新的左滑對象
// 在右滑發(fā)生時(shí)，將上一個(gè)左滑對象清空
if (左滑) {
  pressedObj左滑
  lastLeftObj && lastLeftObj != pressedObj && lastLeftObj右滑
  lastLeftObj = pressedObj; // 記錄上一個(gè)左滑的對象
} else if (右滑) {
  pressedObj右滑
  lastLeftObj = null; // 清空上一個(gè)左滑的對象
}

2016/09/06更新

根據(jù)馬燦發(fā)同學(xué)提出的bug進(jìn)行修改：

右滑時(shí)進(jìn)行判斷，僅當(dāng)要右滑的對象（pressedObj）是上一次左滑的對象（lastLeftObj）時(shí)才將對象右滑并清空lastLeftObj。

if (pressedObj == lastLeftObj) {...}

根據(jù)girlyougo同學(xué)的提議，添加“在除本行外的其他區(qū)域點(diǎn)擊時(shí)均復(fù)位當(dāng)前左滑按鈕”的功能。思路為在滑動結(jié)束時(shí)，判定pressedObj!=lastLeftObj，即可知點(diǎn)擊/滑動的對象為其他對象：

// 點(diǎn)擊除當(dāng)前左滑對象之外的任意其他位置
if (lastLeftObj && pressedObj != lastLeftObj) {
  $(lastLeftObj).animate({marginLeft:"0"}, 500); // 右滑
  lastLeftObj = null; // 清空上一個(gè)左滑的對象
}

實(shí)際上，在添加了上述功能之后，前面提到的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) {
  // 設(shè)定每一行的寬度=屏幕寬度+按鈕寬度
  $(".line-scroll-wrapper").width($(".line-wrapper").width() + $(".line-btn-delete").width());
  // 設(shè)定常規(guī)信息區(qū)域?qū)挾?屏幕寬度
  $(".line-normal-wrapper").width($(".line-wrapper").width());
  // 設(shè)定文字部分寬度（為了實(shí)現(xiàn)文字過長時(shí)在末尾顯示...）
  $(".line-normal-msg").width($(".line-normal-wrapper").width() - 280);

  // 獲取所有行，對每一行設(shè)置監(jiān)聽
  var lines = $(".line-normal-wrapper");
  var len = lines.length; 
  var lastX, lastXForMobile;

  // 用于記錄被按下的對象
  var pressedObj; // 當(dāng)前左滑的對象
  var lastLeftObj; // 上一個(gè)左滑的對象

  // 用于記錄按下的點(diǎn)
  var start;

  // 網(wǎng)頁在移動端運(yùn)行時(shí)的監(jiān)聽
  for (var i = 0; i < len; ++i) {
    lines[i].addEventListener('touchstart', function(e){
      lastXForMobile = e.changedTouches[0].pageX;
      pressedObj = this; // 記錄被按下的對象 

      // 記錄開始按下時(shí)的點(diǎn)
      var touches = event.touches[0];
      start = { 
        x: touches.pageX, // 橫坐標(biāo)
        y: touches.pageY // 縱坐標(biāo)
      };
    });

    lines[i].addEventListener('touchmove',function(e){
      // 計(jì)算劃動過程中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) { // 點(diǎn)擊除當(dāng)前左滑對象之外的任意其他位置
        $(lastLeftObj).animate({marginLeft:"0"}, 500); // 右滑
        lastLeftObj = null; // 清空上一個(gè)左滑的對象
      }
      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; // 記錄上一個(gè)左滑的對象
      } else if (diffX > 150) {
       if (pressedObj == lastLeftObj) {
        $(pressedObj).animate({marginLeft:"0"}, 500); // 右滑
        lastLeftObj = null; // 清空上一個(gè)左滑的對象
       }
      }
    });
  }

  // 網(wǎng)頁在PC瀏覽器中運(yùn)行時(shí)的監(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) { // 點(diǎn)擊除當(dāng)前左滑對象之外的任意其他位置
        $(lastLeftObj).animate({marginLeft:"0"}, 500); // 右滑
        lastLeftObj = null; // 清空上一個(gè)左滑的對象
      }
      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; // 記錄上一個(gè)左滑的對象
      } else if (diffX > 150) {
       if (pressedObj == lastLeftObj) {
        $(pressedObj).animate({marginLeft:"0"}, 500); // 右滑
        lastLeftObj = null; // 清空上一個(gè)左滑的對象
       }
      }
    });
  }
});
</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">賤行賤遠(yuǎn)</div>
     <div class="line-normal-msg">回憶里想起模糊的小時(shí)候，云朵漂浮在藍(lán)藍(lán)的天空，那時(shí)的你說，要和我手牽手，一起走到時(shí)間的盡頭</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怎么實(shí)現(xiàn)一個(gè)左滑刪除按鈕，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享標(biāo)題：使用jQuery怎么實(shí)現(xiàn)一個(gè)左滑刪除按鈕-創(chuàng)新互聯(lián)
網(wǎng)頁網(wǎng)址：http://www.rwnh.cn/article28/pcdjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、移動網(wǎng)站建設(shè)、虛擬主機(jī)、網(wǎng)站導(dǎo)航、網(wǎng)站制作、微信小程序

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

使用jQuery怎么實(shí)現(xiàn)一個(gè)左滑刪除按鈕-創(chuàng)新互聯(lián)