展示圖:
技巧一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);