jq和icon矢量字的运用

最新推荐文章于 2024-07-10 03:42:08 发布

mardins

最新推荐文章于 2024-07-10 03:42:08 发布

阅读量261

点赞数

分类专栏： js操作dom 文章标签： jquery

本文链接：https://blog.csdn.net/mardins/article/details/107033220

版权

js操作dom 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在豆瓣和手机app商城中经常会遇到评星级的一个操作。那下面我们就用jq简单的写一个滑动点亮星星的效果，当然也复习一下之前的icon的矢量图的使用。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https：//at.alicdn.com/t/font_1910857_y8dn0jfbh0c.css">
    <style>
        .star {
            font-size: 30px;
            color: gold;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="container">

    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(function () {
            let count = 10
            let score = 5

            for (let i = 0; i < count; i++) {
                let star = $("<i/>").addClass('iconfont').addClass('star')
                if (i < score) star.addClass('icon-xingxing1')
                else star.addClass('icon-xingxing')
                $('.container').append(star)
            }


            $('.star').mouseenter(function () {
                let index = $(this).index()
                $('.star').each(function (i) {
                    if (i <= index)
                        $(this).addClass('icon-xingxing1').removeClass('icon-xingxing')
                    else
                        $(this).addClass('icon-xingxing').removeClass('icon-xingxing1')
                })
            })

            $('.star').mouseleave(function () {
                $('.star').each(function (i) {
                    if (i < score)
                        $(this).addClass('icon-xingxing1').removeClass('icon-xingxing')
                    else
                        $(this).addClass('icon-xingxing').removeClass('icon-xingxing1')
                })
            })


            $('.star').click(function () {
                score = $(this).index() + 1
            })


        })
    </script>
</body>

实现效果如下：当鼠标放在星星上的时候会让原来空心的星星变成实心的，鼠标向后拖到哪星星就会点亮的哪，并且停在最后的点亮的地方。

mardins

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq和icon矢量字的运用

在豆瓣和手机app商城中经常会遇到评星级的一个操作。那下面我们就用jq简单的写一个滑动点亮星星的效果，当然也复习一下之前的icon的矢量图的使用。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
复制链接

扫一扫

专栏目录