【jQuery】仿淘宝五星评估打分的实现

【jQuery】仿淘宝五星评价打分的实现

我的上一篇博文写到了评价分数的五星显示，这篇博文将介绍如何实现打分的效果。

首先，我们还是先分析我们想要的效果。

1.当鼠标移到星星上面的时候，当前星星以及前面的星星要亮起来，然后星星的右侧出现提示语，1星：很差，2星：比较差，3星：一般，4星：比较好，5星：很好。

2.当鼠标点击的时候，打分，这个时候当前星星以及前面的星星要亮起来，提示语也要隐藏。

3.但鼠标移开是，就显示我此前打得分数。

我这么说可能也有点不太清楚，大家可以到淘宝感受感受，也可以下载我的源码看看（http://pan.baidu.com/s/1c0ruT3q），下面直接贴代码：

<html>
<head>
<meta charset="utf-8">	
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
</head>
<body>
	<div>
		<a href="javascript:click(1)"><img src="img/star.png" id="star1" onMouseOver="over(1)" onMouseOut="out(1)"/></a>
		<a href="javascript:click(2)"><img src="img/star.png" id="star2" onMouseOver="over(2)" onMouseOut="out(2)" /></a>
		<a href="javascript:click(3)"><img src="img/star.png" id="star3" onMouseOver="over(3)" onMouseOut="out(3)" /></a>
		<a href="javascript:click(4)"><img src="img/star.png" id="star4" onMouseOver="over(4)" onMouseOut="out(4)"/></a>
		<a href="javascript:click(5)"><img src="img/star.png" id="star5" onMouseOver="over(5)" onMouseOut="out(5)"/></a>
		<span id="message"></span>
	</div>
</body>
<script type="text/javascript">
var check = 0;//该变量是记录当前选择的评分
var time = 0;//该变量是统计用户评价的次数，这个是我的业务要求统计的（改变评分不超过三次），可以忽略

/*over()是鼠标移过事件的处理方法*/
function over(param){
	if(param == 1){
		$("#star1").attr("src","img/star_red.png");//第一颗星星亮起来，下面以此类推
		$("#message").html("很差");//设置提示语，下面以此类推
	}else if(param == 2){
		$("#star1").attr("src","img/star_red.png");
		$("#star2").attr("src","img/star_red.png");
		$("#message").html("比较差");
	}else if(param == 3){
		$("#star1").attr("src","img/star_red.png");
		$("#star2").attr("src","img/star_red.png");
		$("#star3").attr("src","img/star_red.png");
		$("#message").html("一般");
	}else if(param == 4){
		$("#star1").attr("src","img/star_red.png");
		$("#star2").attr("src","img/star_red.png");
		$("#star3").attr("src","img/star_red.png");
		$("#star4").attr("src","img/star_red.png");
		$("#message").html("比较好");
	}else if(param == 5){
		$("#star1").attr("src","img/star_red.png");
		$("#star2").attr("src","img/star_red.png");
		$("#star3").attr("src","img/star_red.png");
		$("#star4").attr("src","img/star_red.png");
		$("#star5").attr("src","img/star_red.png");
		$("#message").html("很好");
	}
}
/*out 方法是鼠标移除事件的处理方法，当鼠标移出时，恢复到我的打分情况*/
function out(){
	if(check == 1){//打分是1，设置第一颗星星亮，其他星星暗，其他情况以此类推
		$("#star1").attr("src","img/star_red.png");
		$("#star2").attr("src","img/star.png");
		$("#star3").attr("src","img/star.png");
		$("#star4").attr("src","img/star.png");
		$("#star5").attr("src","img/star.png");
		$("#message").html("");
	}else if(check == 2){
		$("#star1").attr("src","img/star_red.png");
		$("#star2").attr("src","img/star_red.png");
		$("#star3").attr("src","img/star.png");
		$("#star4").attr("src","img/star.png");
		$("#star5").attr("src","img/star.png");
		$("#message").html("");
	}else if(check == 3){
		$("#star1").attr("src","img/star_red.png");
		$("#star2").attr("src","img/star_red.png");
		$("#star3").attr("src","img/star_red.png");
		$("#star4").attr("src","img/star.png");
		$("#star5").attr("src","img/star.png");
		$("#message").html("");
	}else if(check == 4){
		$("#star1").attr("src","img/star_red.png");
		$("#star2").attr("src","img/star_red.png");
		$("#star3").attr("src","img/star_red.png");
		$("#star4").attr("src","img/star_red.png");
		$("#star5").attr("src","img/star.png");
		$("#message").html("");
	}else if(check == 5){
		$("#star1").attr("src","img/star_red.png");
		$("#star2").attr("src","img/star_red.png");
		$("#star3").attr("src","img/star_red.png");
		$("#star4").attr("src","img/star_red.png");
		$("#star5").attr("src","img/star_red.png");
		$("#message").html("");
	}else if(check == 0){
		$("#star1").attr("src","img/star.png");
		$("#star2").attr("src","img/star.png");
		$("#star3").attr("src","img/star.png");
		$("#star4").attr("src","img/star.png");
		$("#star5").attr("src","img/star.png");
		$("#message").html("");
	}
}
/*click()点击事件处理，记录打分*/
function click(param){
	time++;//记录打分次数
	check = param;//记录当前打分
	out();//设置星星数
}
</script>
</html>

效果图：

【jQuery】仿淘宝五星评估打分的实现

上一篇博文：仿淘宝五星评价分数显示

Author：立礼
Sign：人生不要有太多的幻想，而要有更多的行动。

【jQuery】仿淘宝五星评估打分的实现

相关推荐