【求助】在jQuery中使用定时器在定时器中更改某个css然后无法二次更改

最新推荐文章于 2021-06-03 03:07:36 发布

zqq-nuli

最新推荐文章于 2021-06-03 03:07:36 发布

阅读量103

点赞数

分类专栏： jQuery 文章标签： javascript css css3 jquery html5

本文链接：https://blog.csdn.net/zqqfives/article/details/116242681

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

大佬们求助这是为什么！！建议粘贴下去看一下效果
球会在超出后会卡在最上面下不来，但是逻辑貌似是没问题的QAQ

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="../jQuery.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>斑点</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        ul li {
            list-style: none;
        }

        body {
            width: 100%;
            height: 100vh;
            background-image: linear-gradient(hsl(0, 0%, 96%), #9098f3);
        }

        div {
            border-radius: 50%;
            position: absolute;
            box-shadow: 0 0 5px #fff;
        }
    </style>
</head>

<body>
    <script>
        for (let i = 0; i <= 60; i++) {
            var top1 = Math.random() * 600
            var left1 = Math.random() * 1500
            var color = Math.random() * 360
            var white = Math.random() * 60
            $('body').append('<div></div>')
            $('div').eq(i).css({
                width: `${white}px`,
                height: `${white}px`,
                top: `${top1}px`,
                left: `${left1}px`,
                backgroundColor: `hsl(${color}, 50%, 50%)`
            })
        }
        function animteTop() {
            $('div').each(function (ele, index) {
                $(index).animate({
                    top: `+=${Math.random() * (Math.random() * 100)}`,
                    left: `+=${Math.random() * (Math.random() * 100)}`
                }, 1000).animate({
                    top: `+=${Math.random() * (Math.random() * 100)}`,
                    left: `-=${Math.random() * (Math.random() * 100)}`
                }, 1000)
                if ($(index).offset().top > 600) {
                    $(index).css({
                        top: "-50px"
                    })
                }
            })
            requestAnimationFrame(animteTop)
        }
        animteTop()
    </script>
</body>

</html>

zqq-nuli

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【求助】在jQuery中使用定时器在定时器中更改某个css然后无法二次更改

大佬们求助这是为什么！！建议粘贴下去看一下效果球会在超出后会卡在最上面下不来，但是逻辑貌似是没问题的QAQ<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <script src="../jQuery.js"></
复制链接

扫一扫