利用jquery實現向左滾動效果及offset的使用

 

昨天和今天作了一個輪播圖，它的tab標籤不是1,2,3這樣的數據表示，而是使用圓圈表示，效果以下：

 

 

每一個圓中是一個img標籤，經過設置src能夠指定圖片。

點擊每一個圓， 下面的圖片會向左滾動到對應的位置。

 

今天將記錄下圖片的滾動效果和箭頭隨着點擊而變化位置的實現。

 

一、jquery實現向左滾動效果

  實現的原理：

< div  id ="outer" >
     < div  id ="inner" >
         < dl >
           //圖片列表
         </ dl >
     </ div >
</ div >    

outer的position設置爲relative，inner的position設置爲absolute,outer有個固定的Width，且設置overflow爲hidden，這樣就隱藏後面的圖片。inner的寬度儘可能設置大一點，能包裹全部的圖片。這樣，每當點擊tab標籤即圓圈的時候，經過jquery的動畫animate函數設置inner的left便可。

主要的css爲：

#outer {
    border:  1px solid #fff;
    width:  100%;
    overflow:  hidden;
    position:  relative;
    height:  230px;
}

#inner{
    width:  40000px;
    position:  absolute;
    overflow:  hidden;
    left:  0;
}

dl{
    width:  100%;
    display:  inline-block;
    text-align:  left;     
}

 

實現滾動效果的js爲：

$("#inner").animate({"left":marginLeft+"px"},1000);

 

二、offset的使用

注意到上圖的箭頭，它會隨着點擊小圓圈的時候，圓圈慢慢放大後，箭頭也會轉移到該圓圈的下方，實現的方式就是經過offset來實現的。

首先，箭頭是一個img標籤，這個img的position爲absolute，相對於outer。

而後，當點擊圓圈時，會計算圓圈的寬度，圓圈的左偏移量。要想箭頭對應正下方，則箭頭的左偏移量則爲 width/2+offsetLeft.

 

箭頭的css:

#outer .arrow{
    position:  absolute;
    left:  50%;
    top:  0px;
    margin-left:  -10px;
    z-index:  1;
}

 

箭頭偏移量的設置方法：

// 設置箭頭的左偏移量
 setArrowLeft: function(){
     var width =  this.option.cur_wrap_width;
     var offsetWidth = $(".cur_wrap").offset().left;
     var left = width / 2 + offsetWidth;
        $(".arrow").offset({left:left});
}

jquery提供的offset()方法能夠獲取到left，top的偏移量，同時，也能夠經過

offset({left:left,top:top})設置偏移量。