例子,js星星评分效果。
<!doctype html public "-//w3c//dtd html 4.0 transitional//en"> <html> <head> <title>星形评分效果-www.jb200.com-脚本学堂</title> <meta name="generator" content="editplus"> <meta name="author" content="moly"> <meta name="keywords" content=""> <meta name="description" content="星形评分效果"> </head> <style type="text/css"> .starwrapper{border:0px;padding:5px;width:90px;} </STYLE> <SCRIPT TYPE="text/javascript"> function rate(obj,oEvent){ //================== // 图片地址设置 //================== var imgSrc = 'images/icon_star_1.gif'; var imgSrc_2 = 'images/icon_star_2.gif'; //---------------------------------- if(obj.rateFlag) return; var e = oEvent || window.event; var target = e.target || e.srcElement; var imgArray = obj.getElementsByTagName("img"); for(var i=0;i<imgArray.length;i++){ imgArray[i]._num = i; imgArray[i].onclick=function(){ if(obj.rateFlag) return; obj.rateFlag=true; document.getElementById("star").value=this._num+1; }; } if(target.tagName=="IMG"){ for(var j=0;j<imgArray.length;j++){ if(j<=target._num){ imgArray[j].src=imgSrc_2; } else { imgArray[j].src=imgSrc; } } } else { for(var k=0;k<imgArray.length;k++){ imgArray[k].src=imgSrc; } } // www.jb200.com } </script> <body> <form> <div> 给个评价吧! <div class="starWrapper" onMouseOver="rate(this,event)"> <img src="images/icon_star_1.gif" title="请用力加油" /><img src="images/icon_star_1.gif" title="要努力哦" /> <img src="images/icon_star_1.gif" title="继续加油" /><img src="images/icon_star_1.gif" title="我还想去" /> <img src="images/icon_star_1.gif" title="极力推荐" /> </div> <input type="hidden" name="starNum" id="star" value="1"> <p>评论: <textarea name="textarea" rows="10" cols="36" ></textarea> </p> <p> <input type="submit" name="Submit" value="提交"> <input type="reset" name="Submit2" value="取消"> </p> </div> </form> </body> </html>