原生JS实现指定图片随机飘落

最新推荐文章于 2022-06-30 15:43:19 发布

彼岸-花已开

最新推荐文章于 2022-06-30 15:43:19 发布

阅读量1.1k

点赞数 2

分类专栏： Html 文章标签： js css javascript

原文链接：https://blog.csdn.net/qq_42251357/article/details/104590183?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162520858716780264037100%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=162520858716780264037100&biz_i

版权

Html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

效果图：

源代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 800px;
            height: 800px;
            background: #000;
            border: 10px solid red;
            margin: 50px auto;
            position: relative;
            /* verflow: hidden; */

        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>
<script>
    function Snowflake() {
        //获取元素div盒子
        this.obox = document.querySelector(".box");

    };
    Snowflake.prototype.init = function () {
        //创建爱心图片
        let creatimg = document.createElement("img");
        creatimg.src = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Fcomic%2Fcrawl%2F20161215%2F1izm-fxytqax6067927.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627801977&t=906c427f9527f8dd7e6ff99efd2359a5";
        //图片随机大小为30-50px
        let creatsize = this.sj(30, 50);
        //随机图片的位置(在div盒子左边距离到右边距离之间)
        let leftwz = this.sj(0, this.obox.offsetWidth - creatsize);
        //让随机创建的图片在盒子的上方
        let topwz = -creatsize;
        //将创建的图片插入到盒子上方
        this.obox.appendChild(creatimg);
        //给图片设置css样式
        creatimg.style.cssText = `width:${creatsize}px;height:${creatsize}px;position:absolute;left:${leftwz}px;top:${topwz}px;`;

        //随机产生正负号，针对水平方向(实现图片随机左右移动)。
        let sign = Math.random() > 0.5 ? '-' : '';
        //设置图片随机左右移动的速度  
        let speedX = parseInt(sign + this.sj(1, 3));
        //设置图片随机的垂直移动的速度  
        let speedY = this.sj(2, 4);
        //利用计时器,不断的给随机的图片left和top赋值，从而达到爱心飘落的感觉
        creatimg.timer = setInterval(() => {
            leftwz += speedX;
            topwz += speedY;
            //判随机飘落的爱心是否超出了盒子;
            if (leftwz < -creatsize || leftwz > this.obox.offsetWidth || topwz > this.obox.offsetHeight) {
                //超出，关闭计时器，清除创建的爱心
                clearInterval(creatimg.timer);
                this.obox.removeChild(creatimg);
            }
            //赋值爱心的位置
            creatimg.style.left = leftwz + "px";
            creatimg.style.top = topwz + "px";

        }, 1000 / 60);
    };

    //调用
    Snowflake.prototype.creat = function () {
        setInterval(() => {
            this.init();
        }, 50);//50毫秒创建一个随机位置爱心，1秒创建20个。
    }

    //封装一个可以min到max的随机数
    Snowflake.prototype.sj = function (min, max) {
        return Math.round(Math.random() * (max - min) + min);
    }

    //调用
    let s1 = new Snowflake();
    s1.creat();
</script>
</html>