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>
新闻热点
疑难解答
