测试花飞飞（二）

马黑黑

马黑黑

测试代码

1. <style>
   
2. #mydiv {
   
3.         margin: 20px auto;
   
4.         width: 700px;
   
5.          height: 460px;
   
6.         border: 1px solid purple;
   
7.         overflow: hidden;
   
8.         position: relative;
   
9. }
   
10. li-zi {
    
11.         position: absolute;
    
12.         animation: rot 6s infinite linear;
    
13. }
    
14. @keyframes rot { to { transform: rotate(2turn); } }
    
15. </style>
    
16. 
    
17. <div id="mydiv"></div>
    
18. 
    
19. <script>
    
20. 
    
21. class Lizi {
    
22.         constructor(pa) {
    
23.                 this.pa = pa;
    
24.                 this.left = 10;
    
25.                 this.top = 10;
    
26.                 this.xstep = 1;
    
27.                 this.ystep = 1;
    
28.                 this.ele = document.createElement('li-zi');
    
29.         }
    
30. 
    
31.         creating() {  
    
32.                 this.ele.style.cssText = `
    
33.                         left: ${this.left}px;
    
34.                         top: ${this.top}px;
    
35.                 `;
    
36.                 this.pa.appendChild(this.ele);
    
37.                 this.moving();
    
38.         }
    
39. 
    
40.         moving() {
    
41.                 this.left += this.xstep;
    
42.                 this.top += this.ystep;
    
43.                 if(this.left >= this.pa.offsetWidth) this.left = - this.ele.offsetWidth;
    
44.                 if(this.top >= this.pa.offsetHeight) this.top = -this.ele.offsetHeight;
    
45.                 this.ele.style.left = this.left + 'px';
    
46.                 this.ele.style.top = this.top + 'px';
    
47.                 requestAnimationFrame(this.moving.bind(this));
    
48.         }
    
49. }
    
50. 
    
51. let stepAr = [0.2,0.5,0.8,1,1.2,1.5];
    
52. let txtAr = ['\u{1F338}','\u{1F4AE}','\u{1F33A}','\u{1F3F5}','\u2740'];
    
53. 
    
54. Array.from({length: 50}).forEach((element) => {
    
55.         let xIdx = Math.floor(Math.random() * stepAr.length),
    
56.                 yIdx = Math.floor(Math.random() * stepAr.length),
    
57.                 txtIdx = Math.floor(Math.random() * txtAr.length);
    
58.         element = new Lizi(mydiv);
    
59.         element.left = Math.ceil(Math.random() * (mydiv.offsetWidth - 50));
    
60.         element.top = Math.ceil(Math.random() * (mydiv.offsetHeight - 50));
    
61.         element.xstep = stepAr[xIdx];
    
62.         element.ystep = stepAr[yIdx];
    
63.         element.bg = 'none';
    
64.         element.ele.innerText = txtAr[txtIdx];
    
65.         element.creating();
    
66.        
    
67.         element.ele.style.fontSize = 10 + Math.ceil(Math.random() * 20) + 'px';
    
68.         element.ele.style.color = '#' + Math.random().toString(16).substr(-6);
    
69. });
    
70. 
    
71. </script>

复制代码

花飞飞

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

马黑黑

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

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

花飞飞

马黑黑 发表于 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:02
element.left = Math.ceil(Math.random() * (mydiv.offsetWidth - 50));
        element.top = ...

是的，看出道道来了

花飞飞

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

老师发的对比贴，必须找出来

马黑黑

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

红影

这个效果和前一个不一样呢，是掉落并飞出去了

马黑黑

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

然后重来

南无月

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

南无月

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

马黑黑

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

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

红影

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

很漂亮

马黑黑

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

还行

南无月

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

根据实际情况来，雪花就只能落出边缘

马黑黑

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

可以修正一些实现细节

南无月

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

现在左上角出现并落下，只是我想让它垂直落下，

马黑黑

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

xstep = 1，ystep = 0