论坛 › 马黑黑教程专版 › 测试花飞飞（二）

马黑黑 发表于 2023-7-8 19:55

测试花飞飞（二）

<style>
#mydiv {
        margin: 20px auto;
        width: 700px;
       height: 460px;
        border: 1px solid purple;
        overflow: hidden;
        position: relative;
}
li-zi {
        position: absolute;
        animation: rot 6s infinite linear;
}
@keyframes rot { to { transform: rotate(2turn); } }
</style>

<div id="mydiv"></div>

<script>

class Lizi {
        constructor(pa) {
                this.pa = pa;
                this.left = 10;
                this.top = 10;
                this.xstep = 1;
                this.ystep = 1;
                this.ele = document.createElement('li-zi');
        }

        creating() {
                this.ele.style.cssText = `
                        left: ${this.left}px;
                        top: ${this.top}px;
                `;
                this.pa.appendChild(this.ele);
                this.moving();
        }

        moving() {
                this.left += this.xstep;
                this.top += this.ystep;
                if(this.left >= this.pa.offsetWidth) this.left = - this.ele.offsetWidth;
                if(this.top >= this.pa.offsetHeight) this.top = -this.ele.offsetHeight;
                this.ele.style.left = this.left + 'px';
                this.ele.style.top = this.top + 'px';
                requestAnimationFrame(this.moving.bind(this));
        }
}

let stepAr = ;
let txtAr = ['\u{1F338}','\u{1F4AE}','\u{1F33A}','\u{1F3F5}','\u2740'];

Array.from({length: 50}).forEach((element) => {
        let xIdx = Math.floor(Math.random() * stepAr.length),
                yIdx = Math.floor(Math.random() * stepAr.length),
                txtIdx = Math.floor(Math.random() * txtAr.length);
        element = new Lizi(mydiv);
        element.left = Math.ceil(Math.random() * (mydiv.offsetWidth - 50));
        element.top = Math.ceil(Math.random() * (mydiv.offsetHeight - 50));
        element.xstep = stepAr;
        element.ystep = stepAr;
        element.bg = 'none';
        element.ele.innerText = txtAr;
        element.creating();
       
        element.ele.style.fontSize = 10 + Math.ceil(Math.random() * 20) + 'px';
        element.ele.style.color = '#' + Math.random().toString(16).substr(-6);
});

</script>

马黑黑 发表于 2023-7-8 19:56

测试代码
<style>
#mydiv {
        margin: 20px auto;
        width: 700px;
       height: 460px;
        border: 1px solid purple;
        overflow: hidden;
        position: relative;
}
li-zi {
        position: absolute;
        animation: rot 6s infinite linear;
}
@keyframes rot { to { transform: rotate(2turn); } }
</style>

<div id="mydiv"></div>

<script>

class Lizi {
        constructor(pa) {
                this.pa = pa;
                this.left = 10;
                this.top = 10;
                this.xstep = 1;
                this.ystep = 1;
                this.ele = document.createElement('li-zi');
        }

        creating() {
                this.ele.style.cssText = `
                        left: ${this.left}px;
                        top: ${this.top}px;
                `;
                this.pa.appendChild(this.ele);
                this.moving();
        }

        moving() {
                this.left += this.xstep;
                this.top += this.ystep;
                if(this.left >= this.pa.offsetWidth) this.left = - this.ele.offsetWidth;
                if(this.top >= this.pa.offsetHeight) this.top = -this.ele.offsetHeight;
                this.ele.style.left = this.left + 'px';
                this.ele.style.top = this.top + 'px';
                requestAnimationFrame(this.moving.bind(this));
        }
}

let stepAr = ;
let txtAr = ['\u{1F338}','\u{1F4AE}','\u{1F33A}','\u{1F3F5}','\u2740'];

Array.from({length: 50}).forEach((element) => {
        let xIdx = Math.floor(Math.random() * stepAr.length),
                yIdx = Math.floor(Math.random() * stepAr.length),
                txtIdx = Math.floor(Math.random() * txtAr.length);
        element = new Lizi(mydiv);
        element.left = Math.ceil(Math.random() * (mydiv.offsetWidth - 50));
        element.top = Math.ceil(Math.random() * (mydiv.offsetHeight - 50));
        element.xstep = stepAr;
        element.ystep = stepAr;
        element.bg = 'none';
        element.ele.innerText = txtAr;
        element.creating();
       
        element.ele.style.fontSize = 10 + Math.ceil(Math.random() * 20) + 'px';
        element.ele.style.color = '#' + Math.random().toString(16).substr(-6);
});

</script>

花飞飞 发表于 2023-7-8 19:58

原来是一块出来的然后大家解散，现在出来就是散的。

马黑黑 发表于 2023-7-8 19:59

花飞飞 发表于 2023-7-8 19:58
原来是一块出来的然后大家解散，现在出来就是散的。

所以，this.left 和 this.top 很有必要

花飞飞 发表于 2023-7-8 20:02

马黑黑 发表于 2023-7-8 19:59
所以，this.left 和 this.top 很有必要

      element.left = Math.ceil(Math.random() * (mydiv.offsetWidth - 50));
      element.top = Math.ceil(Math.random() * (mydiv.offsetHeight - 50));
这两句的功劳

马黑黑 发表于 2023-7-8 20:03

花飞飞 发表于 2023-7-8 20:02
element.left = Math.ceil(Math.random() * (mydiv.offsetWidth - 50));
      element.top = ...

是的，看出道道来了

花飞飞 发表于 2023-7-8 20:07

马黑黑 发表于 2023-7-8 20:03
是的，看出道道来了

老师发的对比贴，必须找出来{:4_170:}

马黑黑 发表于 2023-7-8 20:08

花飞飞 发表于 2023-7-8 20:07
老师发的对比贴，必须找出来

{:4_190:}

红影 发表于 2023-7-8 20:09

这个效果和前一个不一样呢，是掉落并飞出去了{:4_187:}

马黑黑 发表于 2023-7-8 20:09

红影 发表于 2023-7-8 20:09
这个效果和前一个不一样呢，是掉落并飞出去了

然后重来

醉美水芙蓉 发表于 2023-7-8 20:34

南无月 发表于 2023-7-8 20:44

还是不要乱掉的好。。碰边就回。。。

南无月 发表于 2023-7-8 20:44

散出，碰边即回，两二结合，完美。。

马黑黑 发表于 2023-7-8 21:26

南无月 发表于 2023-7-8 20:44
散出，碰边即回，两二结合，完美。。

可以发挥创作想象力，去做自己更喜欢的

红影 发表于 2023-7-8 21:38

马黑黑 发表于 2023-7-8 20:09
然后重来

很漂亮{:4_187:}

马黑黑 发表于 2023-7-8 21:39

红影 发表于 2023-7-8 21:38
很漂亮

还行

南无月 发表于 2023-7-9 08:19

马黑黑 发表于 2023-7-8 21:26
可以发挥创作想象力，去做自己更喜欢的

根据实际情况来，雪花就只能落出边缘{:4_170:}

马黑黑 发表于 2023-7-9 08:56

南无月 发表于 2023-7-9 08:19
根据实际情况来，雪花就只能落出边缘

可以修正一些实现细节

南无月 发表于 2023-7-9 09:01

马黑黑 发表于 2023-7-9 08:56
可以修正一些实现细节

现在左上角出现并落下，只是我想让它垂直落下，{:4_173:}

马黑黑 发表于 2023-7-9 09:07

南无月 发表于 2023-7-9 09:01
现在左上角出现并落下，只是我想让它垂直落下，

xstep = 1，ystep = 0

查看完整版本: 测试花飞飞（二）