【jQuery】仿淘宝五星评价打分的实现
个人上一篇博文写到了评价分数的五星显示，这篇博文将介绍如何实现打分的效果。javascript
首先，咱们仍是先分析咱们想要的效果。html
1.当鼠标移到星星上面的时候，当前星星以及前面的星星要亮起来，而后星星的右侧出现提示语，1星：不好，2星：比较差，3星：通常，4星：比较好，5星：很好。java
2.当鼠标点击的时候，打分，这个时候当前星星以及前面的星星要亮起来，提示语也要隐藏。jquery
3.但鼠标移开是，就显示我此前打得分数。spa
我这么说可能也有点不太清楚，你们能够到淘宝感觉感觉，也能够下载个人源码看看（http://pan.baidu.com/s/1c0ruT3q），下面直接贴代码：.net
<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>
效果图：
上一篇博文：仿淘宝五星评价分数显示code
Author：立礼
Sign：人生不要有太多的幻想，而要有更多的行动。
htm