Jquery 评星效果Rating精华版

来源：互联网发布：高清网络视频解码器编辑：程序博客网时间：2024/06/06 01:49

实现功能：

同一页面可以使用多个评星，相互不干扰
星星数量可自定义
可设置默认的星级
在选择星级之后，仍有悬停效果
可自定义评星描述

rating.js代码：

function InitStar(count,cur,s0,s1,ctn,txt){    for(var i=1;i<=count;i++){          var p=(i<=cur)?s1:s0;         $("<img/>").attr({"src":p,"flag":i}).css("cursor","pointer")        .mouseover(function(){              var cur=parseInt($(this).attr("flag"));            $("#"+ctn).children().each(function(){                  var i=parseInt($(this).attr("flag"));                  var p=(i<=cur)?s1:s0;                $(this).attr("src",p);              });              showStar(txt,cur);           }).click(function(){  //原文博客：blog.csdn.net/bluceyoung            $("#"+ctn).attr("star",$(this).attr("flag"));           }).appendTo($("#"+ctn));      }           $("#"+ctn).attr("star",cur).mouseout(function(){          var cur=parseInt($(this).attr("star"));          $(this).children().each(function(){              var p=($(this).attr("flag")<=cur)?s1:s0;              $(this).attr("src",p);          });          showStar(txt,cur);      });  }    function showStar(txt,cur){      $("#"+txt).val(cur);      $("#"+txt).change();  }

参数说明：

count:星星总数
cur：默认选中第几颗
s0:空星星的图片路径
s1：实星星的图片路径
ctn：创建星星的容器
txt：显示评星描述的textbox

页面代码：

<html><script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script><script src="rating.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function(){//创建星星InitStar(5,3,'k.gif','s.gif','lblStar1','txt')//重写评星描述  $("#txt").change(function(){  var v=$(this).val();    switch(v){    case "1":v="太差了";break;    case "2":v="有待提高";break;    case "3":v="一般";break;    case "4":v="不错";break;    case "5":v="太棒了";break;    default:v="";    }    $(this).val(v);  });});</script><body>  <label id="lblStar1"></label><input type="text" id="txt"><br></body>  </html>

默认在评星描述的textbox里显示的只是评星的等级数，若想自定义评级描述，则加一个change事件，在里面替换值即可

效果图：