jQuery五星级评分代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery五星级评分代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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>jQuery五星级评分代码</title>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<style>
body,li,p,ul { 
    margin: 0;
    padding: 0;
    font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
}
ul, li, ol { list-style: none; }
/* 重置文本格式元素 */
a { text-decoration: none; cursor: pointer; color:#333333; font-size:14px;}
a:hover { text-decoration: none; }
.clearfix::after{ display:block; content:''; height:0; overflow:hidden; clear:both;} 
/*星星样式*/
.content{ width:600px; margin:0 auto; padding-top:20px;}
.title{ font-size:14px; background:#dfdfdf; padding:10px; margin-bottom:10px;}
.block{ width:100%; margin:0 0 20px 0; padding-top:10px; padding-left:50px; line-height:21px;}
.block .star_score{ float:left;}
.star_list{height:21px;margin:50px; line-height:21px;}
.block p,.block .attitude{ padding-left:20px; line-height:21px; display:inline-block;}
.block p span{ color:#C00; font-size:16px; font-family:Georgia, "Times New Roman", Times, serif;}
.star_score { background:url(images/stark2.png); width:160px; height:21px;  position:relative; }
.star_score a{ height:21px; display:block; text-indent:-999em; position:absolute;left:0;}
.star_score a:hover{ background:url(images/stars2.png);left:0;}
.star_score a.clibg{ background:url(images/stars2.png);left:0;}
#starttwo .star_score { background:url(images/starky.png);}
#starttwo .star_score a:hover{ background:url(images/starsy.png);left:0;}
#starttwo .star_score a.clibg{ background:url(images/starsy.png);left:0;}
/*星星样式*/
.show_number{ padding-left:50px; padding-top:20px;}
.show_number li{ width:240px; border:1px solid #ccc; padding:10px; margin-right:5px; margin-bottom:20px;}
.atar_Show{background:url(images/stark2.png); width:160px; height:21px;  position:relative; float:left; }
.atar_Show p{ background:url(images/stars2.png);left:0; height:21px; width:134px;}
.show_number li span{ display:inline-block; line-height:21px;}
</style>
</head>

<body>
<div class="content">
    <p class="title">半颗星评分</p>
    <div id="startone"  class="block clearfix" >
          <div class="star_score"></div>
          <p style="float:left;">您的评分：<span class="fenshu"></span> 分</p>
          <div class="attitude"></div>
    </div>
    <p class="title">1颗星评分</p>
    <div id="starttwo" class="block clearfix">
        <div  class="star_score"></div>
        <p style="float:left;">您的评分：<span class="fenshu"></span> 分</p>
    </div>
    <script type="text/javascript" src="js/startScore.js"></script>
    <script>
     scoreFun($("#startone"))
     scoreFun($("#starttwo"),{
           fen_d:22,//每一个a的宽度
           ScoreGrade:5//a的个数 10或者
         })
    </script>
    <p class="title">分数展示</p>
    <ul class="show_number clearfix">
       <li>
        <div class="atar_Show">
          <p tip="2.5"></p>
        </div>
        <span></span>
       </li>
       <li>
        <div class="atar_Show">
          <p tip="3.5"></p>
        </div>
        <span></span>
       </li>
       <li>
        <div class="atar_Show">
          <p tip="5"></p>
        </div>
        <span></span>
       </li>
    </ul>
    <script>
    //显示分数
      $(".show_number li p").each(function(index, element) {
        var num=$(this).attr("tip");
        var www=num*2*16;//
        $(this).css("width",www);
        $(this).parent(".atar_Show").siblings("span").text(num+"分");
    });
    </script>
  </div>
</body>
</html>

JS代码(startScore.js):

function scoreFun(object,opts){
	var defaults={
	fen_d:16,ScoreGrade:10,types:["很不满意","差得太离谱，与卖家描述的严重不符，非常不满","不满意","部分有破损，与卖家描述的不符，不满意","一般","质量一般","没有卖家描述的那么好","满意","质量不错，与卖家描述的基本一致，还是挺满意的","非常满意","质量非常好，与卖家描述的完全一致，非常满意"],nameScore:"fenshu",parent:"star_score",attitude:"attitude"}
;
	options=$.extend({
}
,defaults,opts);
	var countScore=object.find("."+options.nameScore);
	var startParent=object.find("."+options.parent);
	var atti=object.find("."+options.attitude);
	var now_cli;
	var fen_cli;
	var atu;
	var fen_d=options.fen_d;
	var len=options.ScoreGrade;
	startParent.width(fen_d*len);
	var preA=(5/len);
	for(var i=0;
	i<len;
	i++){
	var newSpan=$("<a href='javascript:void(0)'></a>");
	newSpan.css({
	"left":0,"width":fen_d*(i+1),"z-index":len-i}
);
	newSpan.appendTo(startParent)}
startParent.find("a").each(function(index,element){
	$(this).click(function(){
	now_cli=index;
	show(index,$(this))}
);
	$(this).mouseenter(function(){
	show(index,$(this))}
);
	$(this).mouseleave(function(){
	if(now_cli>=0){
	var scor=preA*(parseInt(now_cli)+1);
	startParent.find("a").removeClass("clibg");
	startParent.find("a").eq(now_cli).addClass("clibg");
	var ww=fen_d*(parseInt(now_cli)+1);
	startParent.find("a").eq(now_cli).css({
	"width":ww,"left":"0"}
);
	if(countScore){
	countScore.text(scor)}
}
else{
	startParent.find("a").removeClass("clibg");
	if(countScore){
	countScore.text("")}
}
}
)}
);
	function show(num,obj){
	var n=parseInt(num)+1;
	var lefta=num*fen_d;
	var ww=fen_d*n;
	var scor=preA*n;
	atu=options.types[parseInt(num)];
	object.find("a").removeClass("clibg");
	obj.addClass("clibg");
	obj.css({
	"width":ww,"left":"0"}
);
	countScore.text(scor);
	atti.text(atu)}
}
;

附件:下载该文件资源,减少时间成本(增值服务)