凤山舞曲（10'47''）
本帖最后由 马黑黑 于 2024-4-15 12:18 编辑 <br /><br /><style>#papa { margin: 0 0 0 calc(50% - 581px); width: 1000px; height: 666px; background: url('https://638183.freep.cn/638183/t24/webp/fguj.webp') no-repeat center/cover; z-index: 1; position: relative; }
#play { position: absolute; width: 100px; left: calc(50% - 50px); top: 20px; opacity: .7; cursor: pointer; animation: rot 5s linear infinite var(--state); }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1351763578" loop autoplay></audio>
<img id="play" src="https://638183.freep.cn/638183/small/ujye.webp" alt="" />
</div>
<script>
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js/ball-lz.js';
document.body.appendChild(sF);
var lz = {papa: '#papa', total: 30, maxsize: 25, move: false};
var mState = () => {
lz.move = !aud.paused;
papa.style.setProperty('--state', ['paused','running'][+lz.move]);
}
play.onclick = () => {
aud.paused ? aud.play() : aud.pause();
mState();
}
window.onload = () => mState();
</script>
<style>
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
</style>
<h2>帖子代码</h2>
<div class='mum'>
<cl-cd data-idx="1"><<span class="tDarkRed">style</span>></cl-cd>
<cl-cd data-idx="2"> #papa { <span class="tBlue">margin:</span> 0 0 0 calc(50% - 581px); <span class="tBlue">width:</span> 1000px; <span class="tBlue">height:</span> 666px; <span class="tBlue">background:</span> url(<span class="tMagenta">'https://638183.freep.cn/638183/t24/webp/fguj.webp'</span>) no-repeat center/cover; <span class="tBlue">z-index:</span> 1; <span class="tBlue">position:</span> relative; }</cl-cd>
<cl-cd data-idx="3"> #play { <span class="tBlue">position:</span> absolute; <span class="tBlue">width:</span> 100px; <span class="tBlue">left:</span> calc(50% - 50px); <span class="tBlue">top:</span> 20px; <span class="tBlue">opacity:</span> .7; <span class="tBlue">cursor:</span> pointer; <span class="tBlue">animation:</span> rot 5s linear infinite <span class="tBlue">var</span>(--state); }</cl-cd>
<cl-cd data-idx="4"> @keyframes rot { to { <span class="tBlue">transform:</span> rotate(360deg); } }</cl-cd>
<cl-cd data-idx="5"><<span class="tDarkRed">/style</span>></cl-cd>
<cl-cd data-idx="6"> </cl-cd>
<cl-cd data-idx="7"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"papa"</span>></cl-cd>
<cl-cd data-idx="8"> <<span class="tDarkRed">audio</span> <span class="tRed">id</span>=<span class="tMagenta">"aud"</span> src=<span class="tMagenta">"https://music.163.com/song/media/outer/url?<span class="tRed">id</span>=1351763578"</span> loop autoplay><<span class="tDarkRed">/audio</span>></cl-cd>
<cl-cd data-idx="9"> <<span class="tDarkRed">img</span> <span class="tRed">id</span>=<span class="tMagenta">"play"</span> src=<span class="tMagenta">"https://638183.freep.cn/638183/small/ujye.webp"</span> alt=<span class="tMagenta">""</span> /></cl-cd>
<cl-cd data-idx="10"><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="11"> </cl-cd>
<cl-cd data-idx="12"><<span class="tDarkRed">script</span>></cl-cd>
<cl-cd data-idx="13"><span class="tBlue">var</span> sF = <span class="tRed">document</span>.createElement(<span class="tMagenta">'script'</span>);</cl-cd>
<cl-cd data-idx="14">sF.charset = <span class="tMagenta">'utf-8'</span>;</cl-cd>
<cl-cd data-idx="15">sF.src = <span class="tMagenta">'https://638183.freep.cn/638183/web/js/ball-lz.js'</span>;</cl-cd>
<cl-cd data-idx="16"><span class="tRed">document</span>.body.appendChild(sF);</cl-cd>
<cl-cd data-idx="17"> </cl-cd>
<cl-cd data-idx="18"><span class="tBlue">var</span> lz = {<span class="tBlue">papa:</span> <span class="tMagenta">'#papa'</span>, <span class="tBlue">total:</span> 30, <span class="tBlue">maxsize:</span> 25, <span class="tBlue">move:</span> false};</cl-cd>
<cl-cd data-idx="19"> </cl-cd>
<cl-cd data-idx="20"><span class="tBlue">var</span> mState = () => {</cl-cd>
<cl-cd data-idx="21"> lz.move = !aud.paused;</cl-cd>
<cl-cd data-idx="22"> papa.style.setProperty(<span class="tMagenta">'--state'</span>, [<span class="tMagenta">'paused'</span>,<span class="tMagenta">'running'</span>][+lz.move]);</cl-cd>
<cl-cd data-idx="23">}</cl-cd>
<cl-cd data-idx="24"> </cl-cd>
<cl-cd data-idx="25"> </cl-cd>
<cl-cd data-idx="26">play.onclick = () => {</cl-cd>
<cl-cd data-idx="27"> aud.paused ? aud.play() : aud.pause();</cl-cd>
<cl-cd data-idx="28"> mState();</cl-cd>
<cl-cd data-idx="29">}</cl-cd>
<cl-cd data-idx="30"> </cl-cd>
<cl-cd data-idx="31"><span class="tRed">window</span>.onload = () => mState();</cl-cd>
<cl-cd data-idx="32"> </cl-cd>
<cl-cd data-idx="33"><<span class="tDarkRed">/script</span>></cl-cd>
</div>
粒子配置：18行
papa - 帖子容器标识，为 id 时 带 # 号，为 class 时 带 . 号，例如：papa: '.mydiv',
total - 小球总数
maxsize - 小球最大直径
move - 小球是否可以移动。这个随意配置为 true 或 false，其值会依据音频的播放暂停状态变更
另外，帖子的音频控制尝试使用新的机制，测试中 最大直径应设置合理的数值，一般在10 ~ 50 之间较好 友情提示：
小球接受点击操作，当小球任何情况下被点击，会在一定区间内来回改变大小（每次加/减2像素）并变色。 首席欣赏，学习下{:4_190:} 听到舞曲脚下也在跃跃欲试。 凤山舞曲（10'47''） 这个标题很新奇 粒子碰撞的给封装起来了，用起来更加方便。。{:4_204:} 南无月 发表于 2024-4-15 17:56
粒子碰撞的给封装起来了，用起来更加方便。。
这个封装仅仅是粒子，不包含音频联动控制。音频控制需要在自己的帖子中处理，或有第三方插件处理也行 流水光阴 发表于 2024-4-15 16:40
凤山舞曲（10'47''） 这个标题很新奇
凤山是个地名
梦油 发表于 2024-4-15 16:33
听到舞曲脚下也在跃跃欲试。
科目三的上？{:4_170:} 朵拉 发表于 2024-4-15 15:31
首席欣赏，学习下
{:4_190:} 马黑黑 发表于 2024-4-15 12:37
友情提示：
小球接受点击操作，当小球任何情况下被点击，会在一定区间内来回改变大小（每次加/减2像素） ...
想要抓到还真是不太容易了 绿叶清舟 发表于 2024-4-15 18:32
想要抓到还真是不太容易了
你可以暂停播放 马黑黑 发表于 2024-4-15 18:44
你可以暂停播放
不早说，害俺抓了老半天的，以为暂停这也跟着不见了呢 绿叶清舟 发表于 2024-4-15 18:52
不早说，害俺抓了老半天的，以为暂停这也跟着不见了呢
音画帖主打播放控制，一切联动由音频而来 马黑黑 发表于 2024-4-15 19:37
音画帖主打播放控制，一切联动由音频而来
以为点击必须动态时才有效果的，没想到可以停下来任由着点了，太欺负点了{:4_189:} 马黑黑 发表于 2024-4-15 18:01
这个封装仅仅是粒子，不包含音频联动控制。音频控制需要在自己的帖子中处理，或有第三方插件处理也行
好，突然想到一个重要的事。。
音乐。。
做图要安静，就关了音乐。 南无月 发表于 2024-4-15 20:26
好，突然想到一个重要的事。。
音乐。。
做图要安静，就关了音乐。
{:4_173:}