1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <script> 7 //存储被点击的图片的index. 8 var imgIndexClicked; 9 var imgs; 10 //设置图片的方法.参数i:从0到i为黄色,之后为空. 11 function setImgByIndex(i) { 12 for (var emp = 0; emp <= i; emp++) { 13 imgs[emp].src = "img/starYellow.png"; 14 } 15 for (var emp = Number(i) + 1; emp < imgs.length; emp++) { 16 imgs[emp].src = "img/starEmpty.png"; 17 } 18 } 19 20 //鼠标移动上去,根据此图片的Index,设置5个图片的src. 21 function setMouseover(i) { 22 return function () { 23 setImgByIndex(i); 24 }; 25 } 26 27 //点击某张图片时存储该图片的index. 28 function setClick(i) { 29 return function () { 30 imgIndexClicked = i; 31 //alert("从0开始计数...第 "+i+" 个被点了."); 32 }; 33 } 34 35 //鼠标离开这个图片,根据保存的被点击的图片号imgIndexClicked,设置5个图片的src. 36 function setMouseleave() { 37 setImgByIndex(imgIndexClicked); 38 } 39 40 onload = function () { 41 imgs = document.getElementsByTagName("img"); 42 for (var i in imgs) { 43 imgs[i].onmouseover = setMouseover(i); 44 imgs[i].onclick = setClick(i); 45 imgs[i].onmouseleave = setMouseleave;//给的是方法,不是方法的调用.故setMouseleave();是错误的. 46 } 47 }; 48 </script> 49 </head> 50 <body> 51 <img src="img/starYellow.png" /> 52 <img src="img/starYellow.png" /> 53 <img src="img/starYellow.png" /> 54 <img src="img/starYellow.png" /> 55 <img src="img/starYellow.png" /> 56 </body> 57 </html>