网上看到的一个星级评分插件，觉得写的非常不错，对其原理进行分析。从代码来看最主要的是使用css样式的background-position属性
background-position -20 -20表示背景图向左移动20px、向上移动20px
background-position 20 20表示背景图向右移动20px、向下移动20px
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.starbox{width:480px;margin:20px auto;height:30px;border:0px solid red;}
.s_name{float:left;display:block;width:60px;text-align:right;}
/*定义颗小星星为没有选中的*/
.star_ul{background:url(images/star.png) no-repeat 0 -150px;width:132px;z-index:10;position:relative;height:25px;border:0px solid yellow;}
.star_ul li{float:left;margin-right:1px;width:25px;height:25px;border:0px solid blue;}
.star_ul li a{display:block;height:25px;position:absolute;left:0;top:0;text-indent:-999em;}
/*定义背景图*/
.star_ul li .active-star{background:url(images/star.png) no-repeat;}
/*定义每个背景图的位置*/
.star_ul li .one-star{width:25px;background-position:0 -120px;z-index:50;}/*背景图水平位置不动，垂直位置移动50像素，也就是左边不动向上移动120像素 -120px表示向上移动*/
.star_ul li .two-star{width:51px;background-position:0 -90px;z-index:40;}/*背景图水平位置不动，左边不动向上移动90像素 -90px表示向上移动*/
.star_ul li .three-star{width:79px;background-position:0 -60px;z-index:30;}/*背景图水平位置不动，左边不动向上移动60像素 -60px表示向上移动*/
.star_ul li .four-star{width:105px;background-position:0 -30px;z-index:20;}/*背景图水平位置不动，左边不动向上移动30像素 -30px表示向上移动*/
.star_ul li .five-star{width:129px;margin-right:0;background-position:0 0;z-index:10;}
.s_result{padding:6px 0 0 5px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var flag = 1;
$('.star_ul a').hover(function(){
flag = 1;
$('.star_ul a').removeClass('active-star');
$(this).addClass('active-star');
$('.s_result').css('color','#c00').html($(this).attr('title'))
},function(){
if( flag == 1){
$(this).removeClass('active-star');
$('.s_result').css('color','#333').html('请打分')
}
});
$('.star_ul a').click(function(){
flag = 2;
$(this).addClass('active-star');
$('.s_result').css('color','#c00').html($(this).attr('title'))
});
$('.square_ul a').hover(function(){
flag = 3;
$('.square_ul a').removeClass('active-square');
$(this).addClass('active-square');
$(this).parents('.starbox').find('.s_result_square').css('color','#c00').html($(this).attr('title'))
},function(){
if(flag == 3){
$(this).removeClass('active-square');
$(this).parents('.starbox').find('.s_result_square').css('color','#333').html('请打分')
}
});
$('.square_ul a').click(function(){
flag = 4;
$(this).addClass('active-square');
$(this).parents('.starbox').find('.s_result_square').css('color','#c00').html($(this).attr('title')) });
})
</script>
</head>
<body>
<div class="starbox">
<span class="s_name">总体评价：</span>
<ul class="star_ul fl">
<li><a class="one-star" title="很差" href="#"></a></li>
<li><a class="two-star" title="差" href="#"></a></li>
<li><a class="three-star" title="还行" href="#"></a></li>
<li><a class="four-star" title="好" href="#"></a></li>
<li><a class="five-star" title="很好" href="#"></a></li>
</ul>
<span class="s_result fl">请打分</span>
</div>
<div class="starbox">
<span class="s_name">口味：</span>
<ul class="square_ul fl">
<li><a class="square-1" title="差" href="#"></a></li>
<li><a class="square-2" title="一般" href="#"></a></li>
<li><a class="square-3" title="好" href="#"></a></li>
<li><a class="square-4" title="很好" href="#"></a></li>
<li><a class="square-5" title="非常好" href="#"></a></li>
</ul>
<span class="s_result_square fl">请打分</span>
</div>
<div class="starbox">
<span class="s_name">环境：</span>
<ul class="square_ul fl">
<li><a class="square-1" title="差" href="#"></a></li>
<li><a class="square-2" title="一般" href="#"></a></li>
<li><a class="square-3" title="好" href="#"></a></li>
<li><a class="square-4" title="很好" href="#"></a></li>
<li><a class="square-5" title="非常好" href="#"></a></li>
</ul>
<span class="s_result_square fl">请打分</span>
</div>
</body>
</HTML>标签：插件,square,star,评分,ul,background,星级,position,active From： https://blog.51cto.com/u_16071779/6194497