通过jquery实现星级评价效果

最新推荐文章于 2024-04-20 00:42:24 发布

daydayup1207

最新推荐文章于 2024-04-20 00:42:24 发布

阅读量5.5k

点赞数 3

分类专栏： jquery JavaScript

本文链接：https://blog.csdn.net/qiladuo1207/article/details/90700958

版权

JavaScript 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

jquery

1 篇文章 0 订阅

订阅专栏

/*
* 思路：
* 1.先封装一个函数，点亮指定颗数的星星：
*   通过each遍历所有li，判断当前li的下标是否小于num，若小于就重新设置当前li的背景图片的位置为点亮的星星的位置
* 2.为每个li绑定mouseover事件，当鼠标移入获取当前li的下标加一（li下标默认从0开始）作为参数传给dianLiang函数，实现鼠标移入点亮相对应的星星
* 3.为每个li绑定click事件，当用户点击当前li时，点亮相应星星并将颗数赋值给num
* 4.当鼠标移出ul时重新调用dianliang函数，并将更改后的num作为参数传递
* */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body,ul,li{
            padding:0;
            margin: 0;
        }
        li{
            list-style: none;
        }
        .rating{
            width: 300px;
            height: 26px;
            margin: 100px auto;
        }
        .rating-item{
            float: left;
            width:50px;
            height: 50px;
            background: url("img/xing.png") no-repeat ;
            -webkit-background-size:50px 100px;
            background-size: 50px 100px;
            background-position: 0 -58px;
            overflow: hidden;
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <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>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
        var num = 2;//点亮个数
        $item = $('#rating').find('.rating-item');//获取的所有li
        //点亮星星函数
        var dianLiang = function (num) {
            $item.each(function (index) { //遍历所有li,即所有星星
                if (index < num){
                    $(this).css('background-position','0 0') //点亮
                }else {
                    $(this).css('background-position','0 -58px') //未点亮
                }
            })
        }
    //    初始化,默认点亮2颗
        dianLiang(num)
    //    绑定事件
        $item.on('mouseover',function () {
            dianLiang($(this).index() + 1)
        }).on('click',function () {
            dianLiang($(this).index() +1);
            num = $(this).index() +1
        })
        $('#rating').on('mouseout',function () {
            dianLiang(num)
        })

    </script>
</body>
</html>

效果图：

素材：

daydayup1207

关注

3
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
通过jquery实现星级评价效果

/** 思路：* 1.先封装一个函数，点亮指定颗数的星星：* 通过each遍历所有li，判断当前li的下标是否小于num，若小于就重新设置当前li的背景图片的位置为点亮的星星的位置* 2.为每个li绑定mouseover事件，当鼠标移入获取当前li的下标加一（li下标默认从0开始）作为参数传给dianLiang函数，实现鼠标移入点亮相对应的星星* 3.为每个li绑定click事件...
复制链接

扫一扫

专栏目录