                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /DOM探索之基礎詳解篇

js顯示不了。救救孩子吧

window.onload=function(){
????//容器對象
????var?box=document.getElementById('container');
????//獲得圖片NodeList對象集合
????var?imgs=box.getElementsByTagName('img');
????//單張圖片的寬度
????var?imgwidth=imgs[0].offsetWidth;
????//設置掩體門露出的寬度
????var?exposewidth=160;
????//設置容器總寬度
????var?boxwidth=imgwidth+(imgs.length-1)*exposewidth;
????box.style.width=boxwidth+'px';
????//設置每道門的初始位置
????function?setImgsPos(){
????????for?(var?i?=?1,?len?=?imgs.length;?i?<?len;?i++)?{
????????????imgs[i].style.left?=?imgwidth?+?exposewidth?*?(i?-?1)?+?'px';
????????}
????}
????setImgsPos();
????//計算每道門打開時應移動的距離
????var?translate=imgwidth-exposewidth;
????//為每道門綁定事件
????for(var?i=?0,len=imgs.length;i<len;i++)?{
????????//使用立即調(diào)用的使用立即調(diào)用的函數(shù)表達式，為了獲得不同的i值
????????(function(i){
????????????imgs[i].onmouseover?=?function?()?{
????????????????//先將每道門復位
????????????????setImgsPos();
????????????????//打開門
????????????????for(var?j=1;j<=i;j++){
????????????????????imgs.style.left=parseInt(imgs.style.left,10)-translate+'px';
????????????????}
????????????}
?????})(i);
}
}

qq_慕絲031510

2019-02-08

源自：DOM探索之基礎詳解篇 1-3

關(guān)注問題我要回答

1409

操作

收起

2 回答

慕無忌7233295
2022-04-01

0 回復有任何疑惑可以回復我~

收起回答

qq_慕絲031510 提問者
2019-02-08

window.onload?=?function(){
????//容器對象
????var?box?=?document.getElementById('container');
????//獲得圖片NodeList對象集合
????var?imgs?=?box.getElementsByTagName('img');
????//單張圖片的寬度
????var?imgWidth?=?imgs[0].offsetWidth;
????//設置掩體門露出的寬度
????var?exposeWidth?=?360;
????//設置容器總寬度
????var?boxWidth?=?imgWidth?+?(imgs.length?-?1)?*?exposeWidth;
????box.style.width?=?boxWidth?+?'px';
????//設置每道門的初始位置
????function?setImgsPos(){
????????for?(var?i?=?1,?len??=??imgs.length;?i?<?len;?i++)?{
????????????imgs[i].style.left??=??imgWidth??+??exposeWidth??*?(i?-?1)??+??'px';
????????}
????}
????setImgsPos();
????//計算每道門打開時應移動的距離
????var?translate?=?imgWidth?-?exposeWidth;
????//為每道門綁定事件
????for(var?i?=??0,len?=?imgs.length;i?<?len;i++)?{
????????//使用立即調(diào)用的使用立即調(diào)用的函數(shù)表達式，為了獲得不同的i值
????????(function(i){
????????????imgs[i].onmouseover??=??function?()?{
????????????????//先將每道門復位
????????????????setImgsPos();
????????????????//打開門
????????????????for(var?j?=?1;j?<=?i;j++){
????????????????????imgs[j].style.left?=?parseInt(imgs[j].style.left,10)?-?translate?+?'px';
????????????????}
????????????};
?????})(i);
}
};