jquery动态星星评分代码
专题：jquery星星评分
使用方法：
1、引用样式文件css/lrtk.css
2、引用jquery的库文件js/jquery.js
3、引用效果的具体js代码文件js/lrtk.js
4、将id为xzw_starSys的DIV的内容复制到您的html文件
5、如果您的页面编码为utf-8，请将lrtk.js的页面编码也改为utf-8，以免出现乱码问题。
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 content="text/html; charset=gb2312" http-equiv="Content-Type">
<title>动态星星评分_www.jb200.com</title>
<link type="text/css" href="css/lrtk.css" rel="stylesheet" />
<script type="text/
javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/lrtk.js"></script>
</head>
<body>
<!--代码开始-->
<div id="xzw_starSys">
<div id="xzw_starBox">
<ul class="star" id="star">
<li><a href="javascript:void(0)" title="1" class="one-star">1</a></li>
<li><a href="javascript:void(0)" title="2" class="two-stars">2</a></li>
<li><a href="javascript:void(0)" title="3" class="three-stars">3</a></li>
<li><a href="javascript:void(0)" title="4" class="four-stars">4</a></li>
<li><a href="javascript:void(0)" title="5" class="five-stars">5</a></li>
</ul>
<div class="current-rating" id="showb"></div>
</div>
<!--评价文字-->
<div class="description"></div>
</div>
<!--代码结束-->
</body>
</html>
2，lrtk.js
复制代码 代码示例:
//star
$(document).ready(function(){
var stepW = 24;
var description = new Array("非常差，回去再练练","真的是差，都不忍心说你了","一般，还过得去吧","很好，是我想要的东西","太完美了，此物只得天上有，人间哪得几回闻!");
var stars = $("#star > li");
var descriptionTemp;
$("#showb").css("width",0);
stars.each(function(i){
$(stars[i]).click(function(e){
var n = i+1;
$("#showb").css({"width":stepW*n});
descriptionTemp = description[i];
$(this).find('a').blur();
return stopDefault(e);
return descriptionTemp;
});
});
stars.each(function(i){
$(stars[i]).hover(
function(){
$(".description").text(description[i]);
},
function(){
if(descriptionTemp != null)
$(".description").text("当前您的评价为："+descriptionTemp);
else
$(".description").text(" ");
}
);
});
});
function stopDefault(e){
if(e && e.preventDefault)
e.preventDefault();
else
window.event.returnValue = false;
return false;
};
3，css样式
复制代码 代码示例:
@charset "utf-8";
*{font:normal 12px/2em '微软雅黑';padding:0;margin:0}
ul,li{list-style:none}
a{ color:#09f;}
/*容器*/
#xzw_starSys{width:400px;border:1px solid #ccc;padding:50px;margin:100px auto}
#xzw_starBox{position:relative;width:120px;float:left}
/**/
#xzw_starSys .description{clear:both;padding:10px 0px}
#xzw_starSys .star{height:20px;width:120px;position:relative;background:url(../images/jbxue.png) repeat-x;cursor:pointer}
#xzw_starSys .star li{float:left;padding:0px;margin:0px}
#xzw_starSys .star li a{display:block;width:24px;height:20px;overflow:hidden;text-indent:-9999px;position:absolute;z-index:5}
#xzw_starSys .star li a:hover{background:url(../images/jbxue.png) 0 -25px repeat-x;z-index:3;left:0}
#xzw_starSys .star a.one-star{left:0}
#xzw_starSys .star a.one-star:hover{width:24px}
#xzw_starSys .star a.two-stars{left:24px}
#xzw_starSys .star a.two-stars:hover{width:48px}
#xzw_starSys .star a.three-stars{left:48px}
#xzw_starSys .star a.three-stars:hover{width:72px}
#xzw_starSys .star a.four-stars{left:72px}
#xzw_starSys .star a.four-stars:hover{width:96px}
#xzw_starSys .star a.five-stars{left:96px}
#xzw_starSys .star a.five-stars:hover{width:120px}
#xzw_starSys .current-rating{background:url(../images/jbxue.png) 0 -25px repeat-x;position:absolute;height:20px;z-index:1;top:0;left:0}
