评论星的制作过程及思路

最新推荐文章于 2021-06-03 22:53:08 发布

！没伞的孩子

最新推荐文章于 2021-06-03 22:53:08 发布

阅读量179

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery

本文链接：https://blog.youkuaiyun.com/weixin_43659542/article/details/90719908

jquery 专栏收录该内容

1 篇文章

订阅专栏

该博客记录了星星开发过程，前端技术方面，使用 HTML 的 li 作为容器，CSS 利用雪碧图为每个 li 添加背景图，JavaScript 结合 jQuery 遍历每个 li，通过调整背景图位置来改变雪碧图位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记录星星开发过程

html 使用 li作为容器

<ul class="rating" id="rating">
        <li class="rating-item" title="很不好"></li>
        <li class="rating-item" title="不好"></li>
        <li class="rating-item" title="一般啦"></li>
        <li class="rating-item" title="好"></li>
        <li class="rating-item" title="很好"></li>
    </ul>

css 使用雪壁图给每个li加背景图

 *{margin: 0px;padding: 0px;list-style: none;}
        .rating{
            width: 320px;
            height: 55px;
            margin: 100px auto;
            overflow: hidden;
        }
        .rating-item{
            float: left;
            margin: 0px 5px;
            width: 54px;
            height: 55px;
            background: url('./img/star.jpg')no-repeat;
            background-position: -62px -62px;   
        }

js jquery 遍历每个li，通过调整背景图的位置来改变雪碧图的位置

//  通过闭包将变量保护起来
     let rating = (function(){
           //初始化
           function init ($ratingitem,num) {
                //遍历所有星星
                $ratingitem.each(function(index){
                    //  判断默认要亮几颗
                    if (index<num) {
                        $(this).css({'background-position':'-62px -6px'})
                    }
                    else{ 
                        $(this).css({'background-position':'-62px -62px'})
                    }
                })
            }
          
          
            //复用
            let initer = function(el,num){
                 let $rating = $(el);
                 let $ratingitem = $rating.find('.rating-item');


                //鼠标进入点亮star
                $rating.on('mouseover','.rating-item',function(){
                    init($ratingitem,$(this).index()+1);
                }).on('click','.rating-item',function(){
                    num=$(this).index()+1
                }).on('mouseout',function(){
                    console.log('鼠标离开父容器')
                    init($ratingitem,num)
                })
                init($ratingitem,num)
            };

          
            // jquery插件
            $.fn.extend({
                rating:function(num){
                    return this.each(function(){
                        initer(this,num);
                    })
                }
            })
            
            // 将闭包函数返回出去
            return{
                initer:initer
            } 
         })()


    //  直接调用    
     rating.initer('#rating',2)

    //  rating.initer('#rating2',3)

    // 通过jquery插件调用函数
    $('#rating2').rating(4)