妈妈的油纸伞
本帖最后由 马黑黑 于 2024-7-13 07:16 编辑 <br /><br /><style>#tiezi {
--width: 1300px;
margin: 100px 0 30px calc(50% - (var(--width) / 2 + 81px));
width: var(--width);
height: 720px;
background: radial-gradient(circle, rgba(244,187,68,.3), rgba(250,218,94,.3), rgba(243,229,171,.3)), black;
background-blend-mode: overlay normal;
box-shadow: 3px 3px 6px #333;
overflow: hidden;
z-index: 1;
position: relative;
}
.ma, .player, .vid { position: absolute; }
.ma { left: 60%; top: 15%; }
.player { cursor: pointer; animation: rot 8s linear infinite var(--state); }
.vid {
bottom: 0;
width: 100%;
height: calc(100% + 70px);
object-fit: cover;
mix-blend-mode: screen;
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div id="tiezi">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2118177919" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/15/5e1c06cdf1cd6.mp4" autoplay autoplay loop muted></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2418175/00/08/37/5d20843234224.mp4" autoplay loop muted></video>
<div id="ma" class="ma">
<img id="player" class="player" src="https://638183.freep.cn/638183/small/yzvisj.png" alt="" />
</div>
</div>
<script>
(function() {
let ar = [, ];
ar.forEach((e,k) => {
let clone = ma.cloneNode(true);
let btn = clone.querySelector('#player');
clone.id="ma" + k;
btn.id = 'player' + k;
btn.style.width = e + 'px';
btn.onclick = () => player.click();
clone.style.cssText += `
left: ${e}%;
top: ${e}%;
filter: hue-rotate(${e}deg);
`;
tiezi.appendChild(clone);
});
let mState = () => {
let players = document.querySelectorAll('.player'),
vids = document.querySelectorAll('.vid');
tiezi.style.setProperty('--state', ['running','paused'][+aud.paused]);
players.forEach(player => player.title = ['暂停','播放'][+aud.paused]);
vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
};
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();})();
</script> 本帖最后由 马黑黑 于 2024-7-13 08:10 编辑 <br /><br /><h2>帖子代码</h2>
<div class="hE"><pre>
<style>
#tiezi {
--width: 1300px;
margin: 130px 0 30px calc(50% - (var(--width) / 2 + 81px));
width: var(--width);
height: 720px;
background: radial-gradient(circle, rgba(244,187,68,.3), rgba(250,218,94,.3), rgba(243,229,171,.3)), black;
background-blend-mode: overlay normal;
box-shadow: 3px 3px 6px #111;
overflow: hidden;
z-index: 1;
position: relative;
}
.ma, .player, .vid { position: absolute; }
.ma { left: 60%; top: 15%; }
.player { cursor: pointer; animation: rot 8s linear infinite var(--state); }
.vid {
bottom: 0;
width: 100%;
height: calc(100% + 60px);
object-fit: cover;
mix-blend-mode: screen;
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div id="tiezi">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2118177919" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/15/5e1c06cdf1cd6.mp4" autoplay autoplay loop muted></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2418175/00/08/37/5d20843234224.mp4" autoplay loop muted></video>
<div id="ma" class="ma">
<img id="player" class="player" src="https://static.fotor.com.cn/assets/res/sticker/a6d2caa2-29fe-487d-965e-20d6512e13c2_thumb.png" alt="" />
</div>
</div>
<script>
(function() {
let ar = [, ];
ar.forEach((e,k) => {
let clone = ma.cloneNode(true);
let btn = clone.querySelector('#player');
clone.id="ma" + k;
btn.id = 'player' + k;
btn.style.width = e + 'px';
btn.onclick = () => player.click();
clone.style.cssText += `
left: ${e}%;
top: ${e}%;
filter: hue-rotate(${e}deg);
`;
tiezi.appendChild(clone);
});
let mState = () => {
let players = document.querySelectorAll('.player'),
vids = document.querySelectorAll('.vid');
tiezi.style.setProperty('--state', ['running','paused'][+aud.paused]);
players.forEach(player => player.title = ['暂停','播放'][+aud.paused]);
vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
};
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
</pre></div>
<script>
const sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
</script>
本帖最后由 马黑黑 于 2024-7-13 07:40 编辑
本帖，关于油纸伞小播的克隆：
31~33行代码是HTML小播的代码结构，一个 div 包裹一张图片（确切说是 img 标签）。div 的 id="ma", class="ma"，这样设置是为了方便后面的克隆操作：克隆源id是克隆的操作依据、class对应的CSS选择器是 .ma，克隆成品使用这个 .ma 样式设定。
克隆操作的JS代码在 38~52 行。
38行，提前做一个数据数组，头两个数字是克隆结构使用的 left 和 top 属性值（百分比）、第三个数字是宽度、第四个数字是色相转换角度。
然后：
① 遍历以上预设数组，指定克隆源（40行）、深度克隆（true 表示 cloneNode 方法是深度克隆，源及其子元素均克隆）。
② 指定未来克隆产品的 img 和其父元素 div 的 id 标识，因为同一个页面，元素的 id 必须是唯一的，如果不做这一步，克隆表面上也会成功，但将来的交互功能会丧失，页面的其他交互可能也会受到影响。
③ 设置未来克隆产品的其他CSS属性，主要是定位、色相改变。
④ 帖子父元素追加克隆产品（代码51行）。 介个太美了，欣赏再欣赏{:4_178:} 二楼的代码演示，如果看到黑白的，说明浏览器 Chromium 内核版本低于 105，或者，浏览器不是基于 Chromium 内核的。
代码展示的行号有交互功能，点击它，它对应的代码行会被选中。 这个是多小播帖子～金色海面，生出红毫相光，大红毫相光～大红大绿的油纸伞，这些元素结合效果十分特别 马黑黑 发表于 2024-7-13 07:37
本帖，关于油纸伞小播的克隆：
31~33行代码是HTML小播的代码结构，一个 div 包裹一张图片（确切说是 img ...
学习克隆小播及功能的例子和详细说明~~超级完美 的教程 贴 马黑黑 发表于 2024-7-13 07:46
二楼的代码演示，如果看到黑白的，说明浏览器 Chromium 内核版本低于 105，或者，浏览器不是基于 Chromium...
着色代码也是新的，手机落后了，看不到色彩。。哭一个
行号有交互功能，点击可选，这个好先进。
马黑黑 发表于 2024-7-13 07:46
二楼的代码演示，如果看到黑白的，说明浏览器 Chromium 内核版本低于 105，或者，浏览器不是基于 Chromium...
行号还有交互作用呢，真没想到{:4_187:} 克隆，这个前面学过了，这里再进一步学习。
小播就这样被完美克隆出来了，一下子3个，每个都能被点击暂停。想弄几个小播就有几个，太赞了。{:4_199:}
两个视频叠加，就是背景，都不用去找背景图了，想调多大就多大，太赞了{:4_199:} “true 表示 cloneNode 方法是深度克隆，源及其子元素均克隆”
所以设置两个数组，有3个小播，有一个就是源。去找了一下，最右边的伞就是源呢{:4_187:} btn.style.width = e + 'px'; 这个是使用的数值，所以要加px
left: ${e}%;这个是用百分比，不用加px，还用了两种设置，便于学习和分析比较，这个太赞了{:4_199:}
发现“第三个数字是宽度、第四个数字是色相转换角度。”这个说反了。{:4_173:}
金色的海洋上，迷离的彩色线条，这个制作太漂亮了{:4_199:} 谢谢老师的分享，好漂亮。
马老师现在越来越厉害了，欣赏学习{:4_199:} 马黑黑 发表于 2024-7-13 07:37
本帖，关于油纸伞小播的克隆：
31~33行代码是HTML小播的代码结构，一个 div 包裹一张图片（确切说是 img ...
哇，这也太美了吧！{:4_187:} 梦江南 发表于 2024-7-13 11:38
哇，这也太美了吧！
{:4_190:} 冬天的雨 发表于 2024-7-13 10:27
马老师现在越来越厉害了，欣赏学习
好久不见 朵拉 发表于 2024-7-13 07:40
介个太美了，欣赏再欣赏
{:4_190:} 老谟深虑 发表于 2024-7-13 10:11
谢谢老师的分享，好漂亮。
{:4_190:}