為什么一定要用函數mav(),不知道用的原理 但是不用,劃過就一下就過去了
<!DOCTYPE html>
<html>
? ? <head>
? ? ? ? <meta charset="utf-8">
? ? ? ? <link rel="stylesheet" type="text/css" href="css/css.css">
? ? ? ? <script type="text/javascript" src="js/js.js"></script>
? ? </head>
? ? <body>
? ? <div id="container">
? ? ? ? <img src="images/door1.png" alt="">
? ? ? ? <img src="images/door2.png" alt="">
? ? ? ? <img src="images/door3.png" alt="">
? ? ? ? <img src="images/door4.png" alt="">
? ? </div>
? ? </body>
</html>
js部分:
window.onload=function(){
? ? var box=document.getElementById('container');
? ? var imgs=box.getElementsByTagName('img');
? ? var imgWidth=imgs[0].offsetWidth;
? ? var exposWidth=160;
? ? var boxWidth=imgWidth+(imgs.length-1)*exposWidth;
? ? box.style.width=boxWidth+'px';
? ? function setimg(){
? ? ? ? for(var i=1;i<imgs.length;i++){ ??
? ? ? ? ? ? imgs[i].style.left=imgWidth+exposWidth*(i-1)+'px'; ?
? ? ? ? }
? ? }
? ? setimg();
? ? var transWidth=imgWidth-exposWidth;
? ? for(var i=0;i<imgs.length;i++){
? ? ? ? function mav(i){
? ? ? ? ? ? imgs[i].onmouseover=function(){
? ? ? ? ? ? ? ? setimg();
? ? ? ? ? ? ? ? for(var j=1;j<=i;j++){
? ? ? ? ? ? ? ? ? ? imgs[j].style.left=parseInt(imgs[j].style.left,10)-transWidth+'px';
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? };
? ? mav(i);
? ? }
};
2015-11-04
換句話說,就是確定鼠標當前在哪張圖片上,然后確定對其他的圖片進行什么操作
2015-11-01
為了獲得鼠標當前位置