JQuery动画之流星雨

最新推荐文章于 2021-08-03 19:10:23 发布

吴越南蛮

最新推荐文章于 2021-08-03 19:10:23 发布

阅读量327

点赞数 1

分类专栏： JQuery

本文链接：https://blog.csdn.net/weixin_43069875/article/details/103061887

版权

JQuery 专栏收录该内容

3 篇文章 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>