jq星星评分打分效果

本文主要是介绍jq星星评分打分效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

demo下载

1、五星打分

<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>

效果图：

Markdown

2、五星显示分数

<html>
<head>
<meta charset="utf-8">  
<style type="text/css">
#bg{width: 60px;height: 16px;background: url("img/star_gray.png");
}
#over{height:16px;background:url("img/star_org.png") no-repeat;
}
</style>
</head><body><div id="bg"><!--这里是背景，也就是灰色的星星--><!--说明，这里的width就是设置分数啦，以我写的为例，一个星星的长度是12px，也就是1分12px，如果是4.3分，就是4.3*12px = 51.6px的长度，当然这个一般是取得数据后用js或者其他模板语言去控制的--><div id="over" style="width:51.6px"></div><!--这里是遮罩，设置宽度以达到评分的效果--></div>
</body>
</html>