javascript星级评分效果示例

作者：简简单单 2013-09-29

提示：您可以先修改部分代码再运行

<style>
#starBox{padding:5px;margin:100px auto 10px;}
#starBox em{float:left;background:url(/blog/upload/image/20130929130715.png) 0 -20px no-repeat;}
#starNotice{font:24px SimSun;margin-left:auto;margin-right:auto;}

</style>

<div id="starBox">
		<em></em>
		<em></em>
  <em></em>
  <em></em>
  <em></em>
</div>
<p id="starNotice"></p>

<script type="text/javascript">
window.onload = function(){
	var star = document.getElementsByTagName('em');
	var oDiv = document.getElementById('starBox');
	var temp = 0;
	
	for(var i = 0, len = star.length; i < len; i++){
		star[i].index = i;
		
		star[i].onmouseover = function(){
			clear();
			for(var j = 0; j < this.index + 1; j++){
				star[j].style.backgroundPosition = '0 0';
			}
		}
		
		star[i].onmouseout = function(){
			for(var j = 0; j < this.index + 1; j++){
				star[j].style.backgroundPosition = '0 -20px';
			}
			current(temp);
		}
		
		star[i].onclick = function(){
			temp = this.index + 1;
			document.getElementById('starNotice').innerHTML = temp + ' 颗星';
			current(temp);
		}
	}
	//清除所有
	function clear(){
		for(var i = 0, len = star.length; i < len; i++){
			star[i].style.backgroundPosition = '0 -20px';
		}
	}
	//显示当前第几颗星
	function current(temp){
		for(var i = 0; i < temp; i++){
			star[i].style.backgroundPosition = '0 0';
		}
	}
};
</script></td>
	  </tr>
	</table>

提示：您可以先修改部分代码再运行

上一个：Javascript图片无限循环滚动示例代码下一个：CSS中未知高度水平垂直居中实例

相关文章

精彩推荐