网页常见特效制作1：星级打分效果-原创手记-慕课网

当我们在网上购物、点外卖等之后，都会有一个要求用户评分的步骤，常用的就是五星打分的效果，如下图：
图片描述

那么怎样实现这个效果呢？

本篇文章将从零开始实现该效果。

使用工具

Jquery.js：Jquery是常用的javascript库，极大的简化了javascript开发。
素材：图片描述（该图片来自于网上）。

开发步骤

搭建页面

新建index.html文件并引入jquery，新建index.js文件，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>评分效果</title>
</head>
<body>
     <!--评分容器-->
     <div class="score-container">
            <!--星星 容器-->
            <ul class="star">
                 <li><img src="./star.png" alt=""></li>
                 <li><img src="./star.png" alt=""></li>
                 <li><img src="./star.png" alt=""></li>
                 <li><img src="./star.png" alt=""></li>
                 <li><img src="./star.png" alt=""></li>
            </ul>
             <!--打分-->
            <span class="score"></span>
            <!--提示框-->
            <span class="tooltip"></span>
    </div>
 
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="index.js"></script>
</body>
</html>

对页面添加css，当星星处于激活状态时，我们给li标签添加一个active类，默认状态是灰色的,css代码如下：

   .score-container{
       position: relative;
   }
   /* 取消ul默认样式  */
   .score-container ul{
       list-style: none;
       margin: 0;
       padding: 0;
   }
   /* 相对定位  */
   .score-container ul li{
       float: left;
       width: 20px;
       height: 20px;
       overflow: hidden;
       position: relative;
       margin-left: 6px;
   }
   /* 绝对定位，默认显示灰色 */
   .score-container ul li img{
       position:absolute;
       left: 0;
       top:0;
   }
   /*  激活时显示笑脸 */
   .score-container ul li.active img{
      top:-27px;
   }
   /* 分数 */
   .score{
       margin-left:6px;
       color:#666;
       display: none;
       font-size: 12px;
   }
   /* 鼠标滑动时提示框 */
   .tooltip{
       position: absolute;
       min-width: 100px;
       min-height: 80px;
       box-shadow: 1px 1px 3px #ccc;
       border: 1px solid #666;
       color:#666;
       display: none;
       font-size: 12px;
   }

js 代码思路，当鼠标滑动到li 标签上时，获取该标签的位置索引index，将位置索引小于该index的li标签添加active类，而大于该index的移除active类。
index.js 代码：

;(function($){
  $.fn.starScore=function(){
     return this.each(function(){
        var isScore=false;     //标志是否评价过
        var score='';          //得分
        var toolTipText={
            0:'非常差，很气愤',
            1:'有点差',
            2:'一般般',
            3:'总体还好，有点小瑕疵',
            4:'非常好，很满意',
        }
        var me=this;
        var dom=$(this); 
        var starDom=dom.find('.star');
        var scoreDom=dom.find('.score');
        var toolTipDom=dom.find('.tooltip');
        var liDom=starDom.children();
        liDom.on('mouseenter',function(e){
            var index=$(this).index();
            toolTipDom.text(toolTipText[index]).css({
                left:e.pageX+'px',
                top:'20px'
            }).show();
            liDom.each(function(i,li){
                if(i<=index){
                    $(li).addClass('active');
                }else{
                    $(li).removeClass('active');
                }
            });
        }).on('mouseleave',function(){
                var index=$(this).index(); 
                toolTipDom.hide();
                if(isScore){
                       liDom.each(function(i,li){
			                if(i<=score-1){
			                    $(li).addClass('active');
			                }else{
			                    $(li).removeClass('active');
			                }
                     });
                }else{
                    liDom.removeClass('active');
                }
        }).on('click',function(){
                score=$(this).index()+1;
                scoreDom.text('('+score+'分'+')').show();
                isScore=true;      //点击后就算是评价过了
        });
    });
 }
})(jQuery);

调用方式：

$('.score-container').starScore();

总体效果如下：
图片描述

要注意的是：
1、index.js为什么最前面要加一个’;’？
为了防止多个文件连接在一起出错
2、(function(){})() 形式是什么意思？
一个自执行函数
3. $.fn 是什么意思？
jQuery.fn === jQuery.prototype，该方法会被扩展在原型上。