扒皮下騰訊網站地圖頁面頁卡的滾動特效 - vajoy－IT工程師數位筆記本

文章出處

今天要扒的是騰訊網站地圖頁面（http://www.qq.com/map/）頁卡滾動效果，見下圖

有興趣的童鞋可以去那頁面試一試，其動畫效果見下圖：

那么先理下思路：上方的按鈕對應下方的某個欄目，點擊某按鈕時，其對應的欄目（暫且稱為A吧）滾到最上方，原本在A前方的欄目則在滾動結束后自動跳到最后面（這里要注意順序，比如在A前面有2個欄目B和C，那么B滾完便跳到最后，然后C開始滾，C滾完跳到最后面）。

咱這里說的“跳”可以用append實現，即把前面的元素有序地移到最后。至于滾動，可以在全部欄目外圍包一個overflow:hidden的父元素，再讓所有欄目一起向上滾動，每次只滾動一個要滾動的欄目高度，且該欄目滾動完再append到父元素后面，次序的問題可以通過數組+animate的callback實現。

先寫原型：

<head>
<style>
.mapWrap{margin:10px auto 0px auto; padding:20px; width:940px; background-color:white;}
.map_listWrap{width:940px; overflow:hidden;}
.map_titleWrap span{ display:inline-block; width:193px; padding:20px; background-color:yellow; border:solid 1px white;  text-align:center;}
.map_listWrap div{ position:relative; margin-top:10px; width:908px; padding: 0 15px 15px 15px; border:solid 1px black;}
.map_listWrap div h3{display:block; padding:6px 0 6px 21px;font-size:15px; color:red;}
</style>
<script src="jq.js"></script>
<meta charset="utf-8">
<title>網站地圖</title>
</head>

<body>
<div class="mapWrap">
  <div class="map_titleWrap " id="map_titleWrap">
      <span>業務中心</span><span>賬戶中心</span><span>介紹中心</span><span>幫助中心</span>
  </div><!--map_titleWrap結束-->
  <div class="map_listWrap" id="map_listWrap">
      <div id="map_item0">
      <h3>業務中心</h3>
      <p>
          內容<br/>內容123123<br/><br/><br/>內容<br/><br/>1111內容<br/>
      </p>
    </div>
    
    <div id="map_item1">
      <h3>賬戶中心</h3>
      <p>
          內容22222<br/>占位符占位符占位符占位符占位符<br/>內容
      </p>
    </div>
    
    <div id="map_item2">
      <h3>介紹中心</h3>
      <p>
          內容<br/>內容<br/>內容<br/>內容<br/>內容<br/><br/>占位符占位符占位符占位符占位符<br/>占位符占位符占位符占位符占位符<br/>占位符占位符占位符占位符占位符<br/>
      </p>
    </div>
    
    <div id="map_item3">
      <h3>幫助中心</h3>
      <p>
          11111<br/><br/>內容<br/>內容<br/>內容<br/>內容<br/>內容<br/>
      </p>
    </div>
  </div><!--map_listWrap結束-->
  
</div><!--mapWrap結束-->

</body>

View Code

接著是腳本。為了方便日后擴展更多欄目，我們得動態地獲取、挪動元素，而不是把代碼寫死。

感覺這里比較難處理的是獲取需要滾動的欄目元素，如果單純地獲取被選中欄目元素A的索引i，再把所有欄目索引小于i的元素依次append到后面，這種做法行不通，因為每滾動-append一次之后，所有元素都是打亂重排了，你無法確定你后續再重排出來的順序能保持如下規則：
0-1-2-3、1-2-3-0、2-3-0-1、3-0-1-2

所以我們可以拋棄對欄目索引的依賴，轉而從不變的、固定的元素id入手。我們可以建立一個[0,1,2,3]的數組元素，其數值跟每個欄目的id名（map_item0，map_item1，....，map_item3）后綴對應起來，每次點擊上方按鈕時，獲取按鈕的索引i（按鈕的索引是固定不變的，可以放心用），然后截取數組第i個元素前面的元素，將其push到數組后面，形成新的欄目隊列排序，接著要求欄目按照這個順序來做重排。

初步腳本如下：

$(document).ready(function() {
    var $wrap = $("#map_listWrap");  
    var $listItems = $("#map_listWrap div");   //全部列表欄目
    var wrap_h = $wrap.height();$wrap.css({"height":wrap_h}); //固定Wrap的高，以便overflow生效
    var def_t = $listItems.eq(0).offset().top;  //第一個div的偏移
    var items_l = $listItems.length;
    var arr = new Array(); j = 0; //定義并初始化數組
    while(j<items_l){ arr[j]=j++; }
    
    $("span","#map_titleWrap").click(function(){
        var i= $(this).index("#map_titleWrap span");
        for(var k=0;k<arr.length;k++){
            if(arr[k]==i){
                var index = k;   //獲取被選中的欄目A的索引
                continue;
            }
        }
        var arr_front = arr.slice(0,index);  //獲取要滾動的元素（即欄目A前面的元素）的id名后綴
        arr.splice(0,index);
        arr = arr.concat(arr_front);
        
        for(var k=0;k<arr_front.length;k++){    //按順序遍歷來獲得要滾動的元素
                var $item_k = $("#map_item"+arr_front[k]);    //第k個要滾動的元素
                var item_k_h = $item_k.height();    
                $listItems.animate({"top":-item_k_h},300,function(){   //欄目整體滾動后才執行下方代碼
                    $("#map_item"+arr_front[k]).appendTo($wrap);$listItems.css("top","0");})  //滾動后append到最后，同時重置欄目整體top值
        }
    })
});

但該代碼在運行時并沒有按預期效果實現。在點多幾次后會出現順序錯亂。
這是因為animate是異步執行的，在animate執行的300毫秒里，可能for循環已早早就執行完結束了，而最后一句代碼存在動態對象arr_front[k]，其索引k經過for循環已改變了它的值，從而導致我們要append的元素不再是一開始確定好的元素。

解決方法是在外面寫個帶參函數來代入索引，防止元素被更改：

$(document).ready(function() {
    var $wrap = $("#map_listWrap");  
    var $listItems = $("#map_listWrap div"); 
    var wrap_h = $wrap.height();$wrap.css({"height":wrap_h});
    var def_t = $listItems.eq(0).offset().top; 
    var items_l = $listItems.length;
    var arr = new Array(); j = 0; 
    while(j<items_l){ arr[j]=j++; }
    
    $("span","#map_titleWrap").click(function(){
        var i= $(this).index("#map_titleWrap span");
        for(var k=0;k<arr.length;k++){
            if(arr[k]==i){
                var index = k; 
                continue;
            }
        }
        var arr_front = arr.slice(0,index); 
        arr.splice(0,index);
        arr = arr.concat(arr_front);
        
        var callFun = function(i){    //在for外部定義要執行的函數
                $listItems.animate({"top":-item_k_h},300,function(){
                    $("#map_item"+arr_front[i]).appendTo($wrap);$listItems.css("top","0");
                });
        }
        
        for(var k=0;k<arr_front.length;k++){
                var $item_k = $("#map_item"+arr_front[k]);
                var item_k_h = $item_k.height();
                callFun(k);  //調用函數
        }
    })
});