商城网站物品五星好评的效果

1、所需要的图片素材

2、呈现效果

3、html代码

   <div id="productEvaluate">
              给商品评分:
              <ul class="clearfix rating nostar">
                  <li class="one"><a href="javascript:void(0)" title="1分">1</a></li>
                  <li class="two"><a href="javascript:void(0)" title="2分">2</a></li>
                  <li class="three"><a href="javascript:void(0)" title="3分">3</a></li>
                  <li class="four"><a href="javascript:void(0)" title="4分">4</a></li>
                  <li class="five"><a href="javascript:void(0)" title="5分">5</a></li>
              </ul>
          </div>

4、css代码

ul.rating {
    width: 80px;
    height: 16px;
    position: relative;
    overflow: hidden;
    text-indent: -9999em;
}
ul.rating li {
    float: left;
  /*  border: 1px solid red;*/
}
ul.rating li a {
    position: absolute;
    left: 0;
    top: 0;
    width: 16px;
    height: 16px;
    z-index: 200;
}
ul.rating li.one a{
    left: 0;
}
ul.rating li.two a{
    left: 16px;
}
ul.rating li.three a{
    left: 32px;
}
ul.rating li.four a{
    left: 48px;
}
ul.rating li.five a{
    left: 64px;
}
ul.rating li a:hover {
    z-index: 2;
    width: 80px;
    height: 16px;
    overflow: hidden;
    left: 0;
    background: url(../images/star-matrix.gif) no-repeat 0 0;
}
ul.rating li.one a:hover {
    background: url(../images/star-matrix.gif) no-repeat 0 -96px;
}
ul.rating li.two a:hover {
    background: url(../images/star-matrix.gif) no-repeat 0 -112px;
}
ul.rating li.three a:hover {
    background: url(../images/star-matrix.gif) no-repeat 0 -128px;
}
ul.rating li.four a:hover {
    background: url(../images/star-matrix.gif) no-repeat 0 -144px;
}
ul.rating li.five a:hover {
    background: url(../images/star-matrix.gif) no-repeat 0 -160px;
}

 

.nostar {  /*没有星的评价背景图*/
	background: url(../images/star-matrix.gif) 0 0  no-repeat;
}
.onestar { /*一颗星的评价背景图*/
	background: url(../images/star-matrix.gif) 0 -16px  no-repeat;
}
.twostar { /*二颗星的评价背景图*/
	background: url(../images/star-matrix.gif) 0 -32px  no-repeat;
}
.threestar {/*三颗星的评价背景图*/
	background: url(../images/star-matrix.gif) 0 -48px  no-repeat;
}
.fourstar { /*四颗星的评价背景图*/
	background: url(../images/star-matrix.gif) 0 -64px  no-repeat;
}
.fivestar {/*五颗星的评价背景图*/
	background: url(../images/star-matrix.gif) 0 -80px  no-repeat;
}

主要实现思路在css里面，把li下的a标签进行绝对定位，把5个a标签定位在和背景图片的每个五角星重合的位置。利用：hover伪类改变当前a标签的宽度与背景图片的宽度一致，同时设置相应的星星背景图片。注意红色区域的代码
，当前鼠标移上去的a标签的z-index是小于其他a标签的z-index的，这就保证鼠标在移动到其他a标签时会触发hover效果(由于当前a的宽度是整个的背景宽度，如果不设置其他a标签z-index大于当前鼠标移上去的z-index，那么鼠标移动到其他a标签时不会触发a标签的：hover效果)

3、jquery代码部分

$("#productEvaluate ul li>a").click(function(){
            var sty=$(this).parent().attr("class");
            $(this).parent().parent().removeClass().addClass("clearfix rating "+sty+"star");
        });