网页前端实现五星好评效果

整体代码可分为三部分：css样式、HTML主体、js函数

1.css样式

#score1 i {
          vertical-align: middle;
          display: inline-block;
          width: 32px;
          height: 32px;
          background: url('*img/star1.jpg*') no-repeat center center;
         background-size: cover;
      }

 #score1 i.on {
             background-image: url('*img/star2.jpg*');
         }

（注意图片路径是单引号）

2.HTML主体

3.js函数**

function score(scoreId, extentStr) {
             scoreId = "#" + scoreId;
             $(scoreId + " i").hover(function() { // 鼠标移入，未确定选择分数时
                     for (var i = 0; i <= $(this).index(); i++) {
                             $(scoreId + " i").eq(i).addClass(extentStr); // 实星星
                         }
                     $(scoreId + " i").click(function() { // 点击评分，确定好分数后无法更改
                             for (var i = 0; i <= $(this).index(); i++) {
                                    $(scoreId + " i").eq(i).addClass(extentStr);
                               }
                             $(scoreId).val($(this).index()+1);
                             $(scoreId + " i").unbind(); // 清除移入移出
                         });

                 }, function() { // 鼠标移出
                     $(scoreId + " i").removeClass(extentStr); // 描线星星
                 });
         }
     score("score1", "on");

写进去发现hover函数并不能用，此时需要引入js的包。
可在此网站下载各种版本的jquery >http://www.jq22.com/jquery-info122

在头部引入HTTP连接后，需要手动Alt+enter下载。

4.运行结果