不提供图片了，读者自行更换就可以
效果图如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.star-five {
width: 27px;
height: 27px;
background: url(img/star.gif);
background-position: 0 0px;
float: left;
}
</style>
</head>
<body>
<div id="one" class="star-five"></div>
<div id="two" class="star-five"></div>
<div id="three" class="star-five"></div>
<div id="four" class="star-five"></div>
<div id="five" class="star-five"></div>
</body>
</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script type="text/javascript">
$(".star-five").mouseover(function(evt) {//当鼠标移动到星星上时
var e = evt || event;
var index = $(".star-five").index(this)+1;
$(".star-five:lt("+index+")").css("background","url(img/star.gif) 0px 27px");
});
$(".star-five").mouseout(function(evt) {//当鼠标离开星星时
var e = evt || event;
var index = $(".star-five").index(this)+1;
$(".star-five:lt("+index+")").css("background","url(img/star.gif)");
});
$(".star-five").click(function(evt) {//当鼠标点击星星时
var e = evt || event;
var index = $(".star-five").index(this)+1;
$(".star-five").unbind("mouseover");
$(".star-five").unbind("mouseout");
});
</script>
扫一扫
414
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
