var imgWidth = imgs[0].offsetWidth;/*這是動(dòng)態(tài)獲取的嗎??還是固定值*/
var imgWidth = imgs[0].offsetWidth;/*這是動(dòng)態(tài)獲取的嗎??還是固定值??*/
代碼中的每一張圖片的offsetWidth被其他的圖片覆蓋的部分算嗎?是怎么計(jì)算了。我知道offsetWidth 是width+padding+border,但是這里有些不懂。
window.onload?=?function()?{ ????//容器對(duì)象 ????var?box?=?document.getElementById('container'); ????//獲得圖片NodeList對(duì)象集合 ????var?imgs?=?box.getElementsByTagName('img'); ????//單張圖片的寬度 ????var?imgWidth?=?imgs[0].offsetWidth;/*這是動(dòng)態(tài)獲取的嗎??還是固定值*/ ????//設(shè)置掩藏門(mén)體露出的寬度 ????var?exposeWidth?=?160; ????//設(shè)置容器總寬度 ????var?boxWidth?=?imgWidth?+?(imgs.length?-?1)?*?exposeWidth; ????box.style.width?=?boxWidth?+?'px'; ????//設(shè)置每道門(mén)的初始位置 ????function?setImgsPos()?{ ????????for?(var?i?=?1,?len?=?imgs.length;?i?<?len;?i++)?{ ????????????imgs[i].style.left?=?imgWidth?+?exposeWidth?*?(i?-?1)?+?'px'; ????????} ????} ????setImgsPos(); ????//計(jì)算每道門(mén)打開(kāi)時(shí)應(yīng)移動(dòng)的距離 ????var?translate?=?imgWidth?-?exposeWidth; ????//為每道門(mén)綁定事件 ????for?(var?i?=?0,?len?=?imgs.length;?i?<?len;?i++)?{ ????????//使用立即調(diào)用的函數(shù)表答式,為了獲得不同的i值 ????????(function(i)?{ ????????????imgs[i].onmouseover?=?function()?{ ????????????????//先將每道門(mén)復(fù)位 ????????????????setImgsPos(); ????????????????//打開(kāi)門(mén) ????????????????for?(var?j?=?1;?j?<=?i;?j++)?{ ????????????????????imgs[j].style.left?=?parseInt(imgs[j].style.left,?10)?-?translate?+?'px'; ????????????????} ????????????}; ????????})(i); ????} };
2015-11-28
是動(dòng)態(tài)獲取 但是如果你dom結(jié)構(gòu)不變的話 ?她就是固定的