妈妈的油纸伞

马黑黑 · 发表于 2024-7-13 07:11

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2024-7-13 07:16 编辑

马黑黑 · 发表于 2024-7-13 07:12

本帖最后由马黑黑于 2024-7-13 08:10 编辑

帖子代码

<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 = [[25,15,30,100], [45,70,150, 120]];
	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[3] + 'px';
		btn.onclick = () => player.click();
		clone.style.cssText += `
			left: ${e[0]}%;
			top: ${e[1]}%;
			filter: hue-rotate(${e[2]}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 07:37

本帖最后由马黑黑于 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行）。