【Jquery】排行榜 (跳過中間順序)

成品連結：演示

展示圖：

技巧一CSS：

下方商品區因為換頁簽不會滑過中間頁簽
所以寫CSS需用到：position:relative; position: absolute; overflow:hidden;
將第一個放到要顯示的框框裡，其餘的放到看不到的地方

#rank-area-1 .rank-detail {
 margin-top:10px;
 position:relative;
 width:703px;
 height:405px;
 overflow:hidden;
}
#rank-area-1 .content{
 position:absolute;
 top:0px;
 left:703px;
 width:703px;
 height:405px;
}

#rank-area-1 .content:first-child{
 left:0px;
}

技巧二JS：

原理是當滑鼠移過，先判斷要往左還是右
找出下一個頁面放到左邊或右邊
然後兩個區塊同時移動

// 判斷往左往右
if ($selectArea.index() > $currArea.index()){
  $selectArea.css('left',$randWidth);
  $currArea.animate({left:"-="+$randWidth},500);
  $selectArea.animate({left:"-="+$randWidth},500);
}else{
  $selectArea.css('left',$randWidth*-1);
  $currArea.animate({left:"+="+$randWidth},500);
  $selectArea.animate({left:"+="+$randWidth},500);
}

技巧三 上方移動線條：

原理：當滑鼠移到自上方，取得距離原點距離，用animate做移動

$lineMove = $("#rank-area-1 i[kid="+$selectKid+"]").position().left + 5;
  $lineWidth = $("#rank-area-1 i[kid="+$selectKid+"]").outerWidth();
  $("#rank-area-1 .line").animate({left:$lineMove,width:$lineWidth},500);