仿淘宝的结构新改的星星打分

重新改版后，利用绝对定位重叠每个星星的标签，又因为宽度不同，可以划到每个星星，这样只需要拼合2张图片

对应的HTML

对此应用评分&nbsp;&nbsp;<strong id=”mytitle”>8分</strong>

<ul>
              <li> <a href=”#” title=”1″>1</a> </li>
              <li> <a href=”#” title=”2″>2</a> </li>
              <li> <a href=”#” title=”3″>3</a> </li>
              <li> <a href=”#” title=”4″>4</a> </li>
              <li> <a href=”#” title=”5″>5</a> </li>
              <li> <a href=”#” title=”6″>6</a> </li>
              <li> <a href=”#” title=”7″>7</a> </li>
              <li> <a href=”#” title=”8″>8</a> </li>
              <li> <a href=”#” title=”9″>9</a> </li>
              <li> <a href=”#” title=”10″>10</a> </li>
            </ul>

对应的CSS

.dafen{ position:relative}
ul.rating {width:126px; height:22px; overflow:hidden; position:relative; background: url(../img/star-matrix2.png) no-repeat 0 0;}
ul.rating li a {position:absolute;left:0;top:0px;width:11px;height:22px; overflow:hidden; text-indent:-2000em; position:absolute; text-decoration:none; }
ul.rating li.one a{width:10%; z-index:10}
ul.rating li.two a{width:20%; z-index:9}
ul.rating li.three a{width:30%; z-index:8}
ul.rating li.four a{width:40%; z-index:7}
ul.rating li.five a {width:50%; z-index:6}
ul.rating li.six a{width:60%; z-index:5}
ul.rating li.seven a{width:70%; z-index:4}
ul.rating li.eight a{width:80%; z-index:3}
ul.rating li.nine a{width:90%; z-index:2}
ul.rating li.ten a{width:100%; z-index:1}
ul.rating li a:hover,ul.rating li a.hover{background: url(../img/star-matrix2.png) no-repeat 0 -22px;}

对应的JS//基于JUERY，请自行引入

function star(){
    $(“ul.rating li a”).click(function(){
      var title = $(this).attr(“title”);  
   var cl = $(this).parent().attr(“class”);
   var obj= $(this);
       $(“#mytitle”).html(title+”分”);
       obj.addClass(“hover”);
     })}