<!doctype html><html><head><meta charset="utf-8" /><title>多滑動效果展示</title><link rel="stylesheet" href="style/reset.css" /><link rel="stylesheet" href="style/Qc.css" /><link rel="stylesheet" href="style/Qe.css" /><script src="script/Qe.js"></script></head><body><div id="Qe"><img src="tupianku/1.jpg" alt="鈺"? title="Admin"/><img src="tupianku/2.jpg" alt="楽" title="Nckop"/><img src="tupianku/3.jpg" alt="懦" title="Galse"/><img src="tupianku/4.jpg" alt="末" title="Sole"/><img src="tupianku/5.jpg" alt="末" title="Sole"/></div><div id="Qc"><img src="tupianku/6.jpg" alt="鈺"? title="Admin"/><img src="tupianku/7.jpg" alt="楽" title="Nckop"/><img src="tupianku/8.jpg" alt="懦" title="Galse"/><img src="tupianku/9.jpg" alt="末" title="Sole"/><img src="tupianku/10.jpg" alt="末" title="Sole"/></div><script src="script/Qc.js"></script></body></html>只能同時存在一組圖片滑動效果的圖片，另一組被堆積。js代碼只有一組被運(yùn)行，css效果產(chǎn)生的堆積發(fā)生了作用，js在另一組代碼沒有發(fā)生作用js代碼：window.onload=function(){?//容器對象?var Qe=document.getElementById('Qe');?//獲得圖片 Nodelist對象集合?var imgs=Qe.getElementsByTagName('img');?//單張圖片的寬度?var imgwidth=imgs[0].offsetWidth;//javascript 中 offsetWidth 是對象的可見寬度，包滾動條等邊線，會隨窗口的顯示大小改變?//設(shè)置掩藏門體露出的寬度?var exposewidth=60;?//設(shè)置容器的總寬度?var boxwidth=imgwidth+(imgs.length-1)*exposewidth;?Qe.style.width=boxwidth+'px';?//設(shè)置每道門的初始位置?function setimg(){?for(var i=1,len=imgs.length;i<len;i++){??imgs[i].style.left=imgwidth+exposewidth*(i-1)+'px';?}??}??setimg();??//計算每道門打開時應(yīng)移動的距離??var tran=imgwidth-exposewidth;??//為每道門綁定事件????? for(var i=0,len=imgs.length;i<len;i++){???//使用立即調(diào)用函數(shù)表達(dá)式，為了獲得不同的i值???(function(i){????imgs[i].onmouseover=function(){//onmouseover 事件會在鼠標(biāo)指針移動到指定的對象上時發(fā)生。?????//先將每道門復(fù)位。?????setimg();?????//打開門?????for(var j=1;j<=i;j++){??????imgs[j].style.left=parseInt(imgs[j].style.left,10)-tran+'px';??????}?????}????})(i)???}?}
js DOM怎么實(shí)現(xiàn)幾組圖片同時產(chǎn)生滑動效果
亂也
2016-12-08 01:18:55
