HTML代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>星星评分</title>
<link rel="stylesheet" type="text/css" href="css1.css"/>
<script src="../jquery.js"></script>
<script src="Untitled-1.js"></script>
</head>
<body>
<div id="div1">
<ul>
<li title="一星差评,呵呵呵,差的忍无可忍!!!"></li>
<li title="二星差评"></li>
<li title="三星差评"></li>
<li title="四星中评"></li>
<li title="五星中评"></li>
<li title="六星中评"></li>
<li title="七星好评"></li>
<li title="八星好评"></li>
<li title="九星好评"></li>
<li title="十星满评!!!666,酷毙了!!!"></li>
<span></span>
</ul>
</div>
</body>
</html>
css代码:
@charset "utf-8";
/* CSS Document */
* {
padding: 0;
margin: 0;
}
ul{
position: absolute;
top: 50px;
left: 50px;
}
li {
width: 24px;
height: 19px;
background-image:url(img/start.png);
background-repeat:no-repeat;
background-position:0 0;
float: left;
list-style: none;
}
js代码:
// JavaScript Document
function addstar(e)
{
$(e).css(
"background-position","0 -28px").prevAll('li').css(
"background-position","0 -28px");
$('#div1 span').text($(e).attr('title'));
}
function removestar(e)
{
$(e).css(
"background-position","0 0").siblings('li').css(
"background-position","0 0");
$('#div1 span').text(" ");
}
$(function(){
$("#div1 li").hover(function(){
addstar(this)},
function(){
removestar(this)}).click(function(){
$("#div1 li").css("background-position","0 0");
addstar(this);
$("#div1 li").unbind("mouseenter").unbind("mouseleave");
});
})