当前位置: 代码迷 >> JavaScript >> js兑现评论打星
  详细解决方案

js兑现评论打星

热度:288   发布时间:2012-10-11 10:16:10.0
js实现评论打星

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>脚本之家_www.jb51.net_阿当制作选星星打分</title> 
<style type="text/css"> 
.starWrapper{border:1px solid #FFCC00;padding:5px;width:70px;} 
.starWrapper img{cursor:pointer;} 
</style> 
<script type="text/javascript"> 
function rate(obj,oEvent){ 
//================== 
// 图片地址设置 
//================== 
var imgSrc = 'star-off.gif'; 
var imgSrc_2 = 'star-on.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; 
//alert(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; 
} 
} 
} 
</script> 
<body> 
<p class="starWrapper" onmouseover="rate(this,event)"> 
<img src="star-off.gif" title="很烂" />
<img src="star-off.gif" title="一般" />
<img src="star-off.gif" title="还好" />
<img src="star-off.gif" title="较好" />
<img src="star-off.gif" title="很好" /> 

</body> 
</html> 

?

?

?

  相关解决方案