《雪山》代码

红影

马黑黑 发表于 2024-5-28 22:26
这是自然的

不知道怎么弄，去试了一下，克隆不出更多的

马黑黑

红影 发表于 2024-5-28 23:31
不知道怎么弄，去试了一下，克隆不出更多的

这个需要用到循环迭代。完整的JS代码如下：

1. (function() {
   
2.         Array.from({length: 6}).forEach((e,k) => {
   
3.                 e = document.createElement('e-son');
   
4.                 e.style.cssText += `--deg: ${60 * k}deg; --bg: ${Math.round(Math.random() * 360)};`;
   
5.                 ma.appendChild(e);
   
6.         });
   
7.         Array.from({length: 3}).forEach((item,key) => {
   
8.                 //定位+色相转换数据数组
   
9.                 var pos = [[200, 420, 60], [700, 251, 125], [460, 300, 260]];
   
10.                 item = document.getElementById('ma');
    
11.                 var clone = item.cloneNode(true);
    
12.                 clone.id = 'ma' + key;
    
13.                 clone.onclick = () => ma.click();
    
14.                 clone.style.cssText += `
    
15.                         left: ${pos[key][0]}px;
    
16.                         top: ${pos[key][1]}px;
    
17.                         filter: hue-rotate(${pos[key][2]}deg);
    
18.                 `;
    
19.                 papa.appendChild(clone);
    
20.         });
    
21. 
    
22.         aud.onplaying = aud.onpause = () => {
    
23.                 papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
24.                 aud.paused ? vid.pause() : vid.play();
    
25.         };
    
26.         ma.onclick = () => aud.paused ? aud.play() : aud.pause();
    
27. })();

复制代码

注意看有注释的代码块

马黑黑

红影 发表于 2024-5-28 23:31
里面又有新东西呢

也不完全新的吧？节点克隆早就介绍过的

南无月

马黑黑 发表于 2024-5-28 23:48
这个需要用到循环迭代。完整的JS代码如下：

注意看有注释的代码块

二个变四个厉害了，正在试用中。。

马黑黑

南无月 发表于 2024-5-29 13:04
二个变四个厉害了，正在试用中。。

辛苦

南无月

马黑黑 发表于 2024-5-28 20:20
挺好挺好。感谢助力收摊

忘了这事儿不是故意的

南无月

马黑黑 发表于 2024-5-28 20:20
不醉，能归

不醉怎么能归呢。。重喝

南无月

马黑黑 发表于 2024-5-29 14:00
辛苦

我把单个叶片宽度改为10，高度改为30，旋转的时候老不在一个点，它位置会跑，
同改了MAMA大小，和单片自身LEFT和TOP位置，差不多可以了。但细看还是有小幅移动。。无法准确原地。
我觉得应该是有个计算方法的。。
但没找出来。

马黑黑

南无月 发表于 2024-5-29 17:58
我把单个叶片宽度改为10，高度改为30，旋转的时候老不在一个点，它位置会跑，
同改了MAMA大小，和单片自 ...

容器元素和子元素的尺寸要配套。你可以给容器元素加个边框以查看子元素的位置，调好了再将边框移除

南无月

马黑黑 发表于 2024-5-29 18:03
容器元素和子元素的尺寸要配套。你可以给容器元素加个边框以查看子元素的位置，调好了再将边框移除

原来如此~~那太好了，晚上再折腾一下跟你反馈。

马黑黑

南无月 发表于 2024-5-29 18:06
原来如此~~那太好了，晚上再折腾一下跟你反馈。

里面有计算规律的，你自己琢磨一下，用体育老师教的数学就能解决的

马黑黑

南无月 发表于 2024-5-29 17:45
不醉怎么能归呢。。重喝

马黑黑

南无月 发表于 2024-5-29 17:45
忘了这事儿不是故意的

俺鸡道俺鸡道

南无月

马黑黑 发表于 2024-5-29 18:11
里面有计算规律的，你自己琢磨一下，用体育老师教的数学就能解决的

我来灌个水，热个身。。开始折腾

南无月

马黑黑 发表于 2024-5-29 18:11
里面有计算规律的，你自己琢磨一下，用体育老师教的数学就能解决的

我也知道有规律，本来凭感觉调得差一丢丢，看着也行，但就觉得不准。。想想还是得问你一声

南无月

马黑黑 发表于 2024-5-29 18:14

这个踉踉跄跄，回家的步伐

南无月

马黑黑 发表于 2024-5-29 18:15
俺鸡道俺鸡道

所以就乐一个。。好在虽迟但到。。且无损

马黑黑

南无月 发表于 2024-5-29 19:45
所以就乐一个。。好在虽迟但到。。且无损

无损压缩

马黑黑

南无月 发表于 2024-5-29 19:44
这个踉踉跄跄，回家的步伐

挺好挺好

马黑黑

南无月 发表于 2024-5-29 19:43
我也知道有规律，本来凭感觉调得差一丢丢，看着也行，但就觉得不准。。想想还是得问你一声

一切讲究配套的