今天在园子李看到一个星级评价的例子，于是参考着自己写了一个例子，声明，绝对不是抄袭的，纯自己手工编写，里面可能有些不精简，有错误神魔的还请大侠们给指导一下。
完整码字：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=1024" />
<meta name="description" content="" />
<meta name="Keywords" content="" />
<title>cfjc</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var click_num=-1; //记录点击的那个等级
var disppear_num=-1; //为了显示当鼠标划过的时候可显示哪些等级 /当disppear_num==-1时，说明没有选择任何等级
var num;
$(".star").hover(function(e) {
e.preventDefault();
/* 鼠标滑过是的效果*/
var starId=$(this).attr("id");
num=$(this).parent().index("li"); //记录是哪一个等级
clearStar(); //先置空
showStar(num); //根据等级来高亮显示
},function(e){
e.preventDefault();
/*鼠标离开时的效果*/
disppear_num=click_num;
if(disppear_num==-1){
clearStar();
}
else{
clearStar();
for(var i=0;i<=disppear_num;i++){
$("#star_"+i).css("background","url(star.png) 0 -28px");
}
}
}).click(function(e){
e.preventDefault();
click_num=$(this).parent().index("li");
clearStar();
for(var i=0;i<=click_num;i++){
$("#star_"+i).css("background","url(star.png) 0 -28px");
}
});
});
function clearStar(){
for(var i=0;i<=3;i++){
$("#star_"+i).css("background","url(star.png)");
}
}
function showStar(starId){
for(var i=0;i<=starId;i++){
$("#star_"+i).css("background","url(star.png) 0 -28px");
}
}
</script>
<style type="text/css">
ul li{
float:left;
list-style:none;
margin-right:10px;
}
.star{
cursor:pointer;
background:url(star.png);
width:19px;
height:19px;
border:0px solid red;
float:left;
}
</style>
</head>
<body>
<ul>
<li><a href="#star1" class="star" id="star_0"></a></li>
<li><a href="#star2" class="star" id="star_1"></a></li>
<li><a href="#star3" class="star" id="star_2"></a></li>
<li><a href="#star4" class="star" id="star_3"></a></li>
</ul>
</body>
</html>
996
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
