offsetWidth與offsetLeft用法之無縫滾動
知識講解:
(1) offsetWidth是什麼?
答:它可以獲取物體寬度的數值;offsetWidth實際獲取的是盒模型(width+border + padding)的寬度。
如圖:
(2) offsetLeft是什麼?
答:獲取的是當前物件左側距離父物件左側的值(均不包含border)。
另外 : style.left: 獲取或設定相對於具有定位屬性(position定義為relative)的父物件的左邊距。
clientLeft:獲取的是當前物件的offsetLeft屬性值和到當前視窗左邊的真實值之間的距離。
如果父物件的position定義為relative【相對定位】,子物件的position定義為absolute【絕對定位】,那麼子物件的style.left的值是相對於父物件的值,等同於offsetLeft的值。
offsetLeft和style.left的區別:
1. style.left 返回的是字串,如28px,offsetLeft返回的是數值28,如果需要對取得的值進行計算,還用offsetLeft比較方便。
2. style.left是讀寫的,offsetLeft是隻讀的,所以要改變div的位置,只能修改style.left。
3. style.left的值需要事先定義,否則取到的值為空。而且必須要定義在html裡,我做過試驗,如果定義在css裡,style.left的值仍然 為空,這就是我剛開始碰到的問題,總是取不到style.left的值。offsetLeft則仍然能夠取到,無需事先定義div的位置。 //可以檢視下面的案例程式碼(29、39行)
案例:無縫滾動圖片
//css程式碼如上
以上js程式碼可以實現了簡單的無縫滾動圖片的方法。
程式碼解釋:
1.26行程式碼:獲取到唯一的oDiv中的ul。若用getElementsByTagName來獲取元素需要加上陣列[0]才能準確的獲取到ul的值;或者可以直接用getElementById來獲取。(注:前面2019.4.27有發表過文章)
2.35行程式碼:在計數器setInterval()函式中讓ul中的內容向左不斷滾動,每次向左移動5px的距離。
3.32行程式碼:完成第二步程式碼後,要讓ul中的圖片連續在水平線上滾動起來需要獲取到ul的寬度才行(即:其中一個li的寬度*li的總數即可)。
4.31行程式碼:此步驟用於複製多的一份ul中的圖片,讓它以8張圖片進行滾動。
5.36行程式碼:if語句判斷,當圖片向左滾動,剩下的長度小於ul的總寬度的一半時,讓ul的left值設定為0px(即:讓第一張圖片回到第八張圖片的後面,然後依次可以進行迴圈操作,這個方法是讓計算機自動完成的,執行速度很快)
其中,以上程式碼靈活運用了 offsetWidth 和 offsetLeft 的 方法,即分別獲取元素寬度和元素距離相對定位的左邊間距;很好的詮釋了無縫滾動圖片的操作效果。