欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于jQuery的左滑出現(xiàn)刪除按鈕的示例

 更新時間:2017年08月29日 11:46:30   作者:Orange橘子洲頭  
本篇文章主要介紹了基于jQuery的左滑出現(xiàn)刪除按鈕的示例,這里整理了詳細的代碼,非常具有實用價值,需要的朋友可以參考下

最近在做項目的時候遇到了個需求,在網頁上實現(xiàn)類似于QQ會話列表那樣子的左滑出現(xiàn)刪除按鈕的效果,于是嘗試著寫了一個,寫出來與大家交流分享,大神勿噴。

基本要求

由于我們是在做一個跨平臺的APP,里面部分界面其實就是WebView加載的網頁,因此需要使用網頁實現(xiàn)這樣的效果:往左滑動時,顯示刪除按鈕,再往右滑,隱藏刪除按鈕。

成品示例圖

額,先上圖吧。下面分別是在PC瀏覽器里和在Mobile瀏覽器里的效果。

PC瀏覽器


手機瀏覽器

實現(xiàn)思路

為了說明我的實現(xiàn)思路,做了兩個圖來輔助說明。

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

圖1 普通狀態(tài)

接下來,我們監(jiān)聽左側常規(guī)信息區(qū)域,監(jiān)聽滑動事件(具體如何監(jiān)聽先不考慮)。當我們監(jiān)聽到左滑事件時,我們讓相應行左偏移,讓按鈕顯示出來,同時左側超出的部分被遮擋(請看圖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ū)域寬度=屏幕寬度
  $(".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;

  // 網頁在移動端運行時的監(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); // 已經左滑狀態(tài)的按鈕右滑
        lastLeftObj = pressedObj; // 記錄上一個左滑的對象
      } else if (diffX > 150) {
       if (pressedObj == lastLeftObj) {
        $(pressedObj).animate({marginLeft:"0"}, 500); // 右滑
        lastLeftObj = null; // 清空上一個左滑的對象
       }
      }
    });
  }

  // 網頁在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); // 已經左滑狀態(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>

總結

代碼還比較粗糙,存在很多bug,也有些地方不是那么絕對。比如當我按下時是在第一條記錄,然后抬起時是在第二條記錄,那么這時候滑動將是第一條記錄。但是這個看具體需求了,如果你覺得滑動的對象應該以按下去時的對象為準的話,那就不管在哪抬起都滑動那個按下時的對象;如果你覺得滑動的對象應該是抬起時的對象,那也沒問題,或者你覺得按下和抬起時不是同一個對象就不滑動任何對象那也行??傊?,看需求。

源碼請戳:源碼下載

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • jquery 判斷div show的狀態(tài)實例

    jquery 判斷div show的狀態(tài)實例

    下面小編就為大家?guī)硪黄猨query 判斷div show的狀態(tài)實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧,祝大家游戲愉快哦
    2016-12-12
  • jQuery截取指定長度字符串代碼

    jQuery截取指定長度字符串代碼

    獲取div中文本的長度,然后和通過和屬性limit規(guī)定的長度進行對比,如果超出長度則使用截取指定的長度,后面用...替代
    2014-08-08
  • ASP.NET中AJAX 調用實例代碼

    ASP.NET中AJAX 調用實例代碼

    最近在ASP.NET中做了一個AJAX調用 : Client端先從ASP.NET Server后臺取到一個頁面模板,然后在頁面初始化時再從Server中取一些相關數(shù)據(jù)以實現(xiàn)頁面模板的動態(tài)顯示
    2012-05-05
  • jQuery的ready方法詳解

    jQuery的ready方法詳解

    本文主要介紹了jQuery的ready方法的使用方法,用此方法實現(xiàn)了當爺們加載完成后才執(zhí)行的效果,有相同需求的小伙伴可以參考下。
    2014-11-11
  • jQuery插件擴展操作入門示例

    jQuery插件擴展操作入門示例

    這篇文章主要介紹了jQuery插件擴展操作,結合簡單實例形式分析了jQuery擴展方法的定義與使用技巧,非常簡單易懂,需要的朋友可以參考下
    2017-01-01
  • 擴展Jquery插件處理mouseover時內部有子元素時發(fā)生樣式閃爍

    擴展Jquery插件處理mouseover時內部有子元素時發(fā)生樣式閃爍

    在我們對一個dom添加mouseover和mouseout時,也就是jquery的hover事件,如果該dom有子元素,鼠標移到子元素時會觸發(fā)mouseout事件,但往往實際情況我們希望在子元素上不觸發(fā)out事件
    2011-12-12
  • bootstrap+jquery項目引入文件報錯的解決方法

    bootstrap+jquery項目引入文件報錯的解決方法

    這篇文章主要介紹了bootstrap+jquery項目引入文件的常見報錯問題,下面小編給大家?guī)砹艘恍╁e誤及錯誤的解決方法,需要的朋友可以參考下
    2018-01-01
  • jquery實現(xiàn)折疊菜單效果【推薦】

    jquery實現(xiàn)折疊菜單效果【推薦】

    本文主要介紹了jquery實現(xiàn)折疊菜單效果的實例,具有很好的參考價值。下面跟著小編一起來看下吧
    2017-03-03
  • jQuery中serializeArray()與serialize()的區(qū)別實例分析

    jQuery中serializeArray()與serialize()的區(qū)別實例分析

    這篇文章主要介紹了jQuery中serializeArray()與serialize()的區(qū)別,結合實例形式分析了jQuery中serializeArray()與serialize()的具體功能、使用技巧與用法區(qū)別,需要的朋友可以參考下
    2015-12-12
  • juery框架寫的彈窗效果適合新手

    juery框架寫的彈窗效果適合新手

    彈窗效果想必大家都有見到過吧,在本文將為大家介紹下使用juery框架來寫個適合新手學習的彈窗效果
    2013-11-11

最新評論