第一个比较简单,用到了简单的css和js,利用图片的位置上下移动,来实现星星评分。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>星际评分一</title>
<style>
body,ul,li{
padding: 0;
margin: 0;
}
li{
list-style-type:none;
/*无标题*/
}
.rating{
width:130px ;
height: 26px;
margin: 100px auto;
}
.rating-item{
float: left;
width: 26px;
height: 26px;
background:url(../img/te.png) no-repeat;
cursor: pointer;/*手*/
}
</style>
</head>
<body>
<!--第一种实现-->
<ul class="rating" id ="rating">
<li class="rating-item" title="很不好"></li>
<li class="rating-item" title="不好"></li>
<li class="rating-item" title="一般"></li>
<li class="rating-item" title="好"></li>
<li class="rating-item" title="很好"></li>
</ul>
<script src="../js/jquery-2.1.1.min.js"></script>
<script>
//团队开发,便于维护,避免命名空间重复,造成的是事件覆盖,可以统一用lzk_num;
//或者加入自运行函数。
var num = 2,
$rating =$('#rating'),
$item = $rating.find('.rating-item');
//点亮
var lightOn =function(num) {
$item.each(function(index){
if(index < num)
{
$(this).css('background-position','0 -26px');
}else{
$(this).css('background-position','0 0');
}
});
};
//初始化
lightOn(num);
//事件绑定,鼠标划过时,离开时。
$item.on('mouseover',function(){
lightOn($(this).index() + 1);
}).on('click',function(){
num = $(this).index() + 1;
});
$rating.on('mouseout',function(){
lightOn(num);
});
</script>
</body>
</html>
效果如图。但是要考虑全局变量,代码复用,封装调用。问题。