继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

网页常见特效制作1:星级打分效果

lockLuck
关注TA
已关注
手记 6
粉丝 4
获赞 16

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

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

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

使用工具

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,该方法会被扩展在原型上。

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP