JQuery动画之流星雨

今天药忘吃喽~ 2023-06-13 04:52 2阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>流星雨</title>
        <style>
            *{/*所有元素内外边距设为0*/
                margin:0;
                padding:0;
            }
            body{
                overflow: hidden;/*隐藏超出页面的部分，防止出现滚动条*/
                background-image:url("images/starbg.jpg");/*背景图片*/
                background-repeat:no-repeat;/*背景不重复*/
                background-size:cover;/*图片覆盖浏览器*/
            }
            #star{
                width:10px;
                height:10px;
                background-color: transparent;/*设置背景颜色为透明色*/
                position:absolute;
                top:-5px;
            }
            #star div{
                background-color: #ccc;
                position:absolute;
            }
            #star div:nth-child(1){
                width:4px;
                height:4px;
                border-radius: 100%;/*设置圆形形状*/
                bottom:0;
                left:0;
            }
            #star div:nth-child(2){
                width:3px;
                height:3px;
                bottom:3px;
                left:3px;
            }
            #star div:nth-child(3){
                width:2px;
                height:2px;
                bottom:6px;
                left:6px;
            }
            #star div:nth-child(4){
                width:1px;
                height:1px;
                bottom:8px;
                left:8px;
            }
            #star div:nth-child(5){
                width:1px;
                height:1px;
                bottom:9px;
                left:9px;
            }
        </style>
    </head>
    <body>
    </body>
    <script src="jquery-3.4.1.min.js"></script>
    <script>
        var wdWidth = $(window).width();//获取浏览器宽度
    
        function getRandom(range){//获取指定范围的随机数[0,range]
            return Math.floor(Math.random()*(range+1));
        }
    
        function move(){//创建流星并移动
            var star = $('<div id="star"><div></div><div></div><div></div><div></div><div></div></div>');//创建元素
            $('body').append(star);//添加元素
            var range = getRandom(wdWidth);//获取随机位置
            star.css('left',range);//设置流星初始位置
            star.animate({top:range,left:0},5*range,function () {//向45度角左下方移动，设置移动方向距离和速度
                star.remove();//删除div
            });
        }
    
        move();//加载完成立即运行一次
        setInterval(move,700);//间隔一定时间重复运行
    </script>
    </html>