var imgWidth = imgs[0].offsetWidth;/*這是動態(tài)獲取的嗎？？還是固定值??*/

代碼中的每一張圖片的offsetWidth被其他的圖片覆蓋的部分算嗎？是怎么計算了。我知道offsetWidth 是width+padding+border,但是這里有些不懂。

window.onload?=?function()?{
????//容器對象
????var?box?=?document.getElementById('container');

????//獲得圖片NodeList對象集合
????var?imgs?=?box.getElementsByTagName('img');

????//單張圖片的寬度
????var?imgWidth?=?imgs[0].offsetWidth;/*這是動態(tài)獲取的嗎？？還是固定值*/

????//設(shè)置掩藏門體露出的寬度
????var?exposeWidth?=?160;

????//設(shè)置容器總寬度
????var?boxWidth?=?imgWidth?+?(imgs.length?-?1)?*?exposeWidth;
????box.style.width?=?boxWidth?+?'px';

????//設(shè)置每道門的初始位置
????function?setImgsPos()?{
????????for?(var?i?=?1,?len?=?imgs.length;?i?<?len;?i++)?{
????????????imgs[i].style.left?=?imgWidth?+?exposeWidth?*?(i?-?1)?+?'px';
????????}
????}
????setImgsPos();

????//計算每道門打開時應(yīng)移動的距離
????var?translate?=?imgWidth?-?exposeWidth;

????//為每道門綁定事件
????for?(var?i?=?0,?len?=?imgs.length;?i?<?len;?i++)?{
????????//使用立即調(diào)用的函數(shù)表答式，為了獲得不同的i值
????????(function(i)?{
????????????imgs[i].onmouseover?=?function()?{
????????????????//先將每道門復(fù)位
????????????????setImgsPos();
????????????????//打開門
????????????????for?(var?j?=?1;?j?<=?i;?j++)?{
????????????????????imgs[j].style.left?=?parseInt(imgs[j].style.left,?10)?-?translate?+?'px';
????????????????}
????????????};
????????})(i);
????}
};