与你同行十八载
本帖最后由 绿叶清舟 于 2023-1-20 19:39 编辑 <br /><br /><style>#papa { margin: 0 0 0 calc(50% - 593px); position: relative; width: 1100px; height: 700px; background: #000 url('https://pic.imgdb.cn/item/63c9331abe43e0d30ef9034d.jpg') no-repeat center/cover; box-shadow: 8px 4px 32px 0 hsla( 0,0%,0%,.72); user-select: none; }
#tit { position: absolute; left: 0; top: 0; padding: 10px 16px; font: bold 2em sans-serif; color: lightgreen; text-shadow: 1px 2px 4px #000; animation: fly 40s infinite alternate linear; transition: color .5s; }
#tit:hover { color: green; }
@keyframes fly { to { left: 860px; } }
</style>
<div id="papa">
<span id="tit">与你同行</span>
</div>
<audio id="aud" src="https://m701.music.126.net/20230120200320/2a58952ba54546140cf20861e40a5732/jdymusic/obj/wo3DlMOGwrbDjj7DisKw/21894506939/5327/3210/70b6/bad69a49ad9c9ce84a9363b342b7d933.mp3" autoplay loop crossorigin="anonymous"></audio>
<script>
(function() {
(function(mkPlayer) {let defaults = { size: 20,player_css: 'left: 50%; transform: translateX(-50%);',playerCode: `<style>#mplayer { --ww: 100%; position: absolute; width: var(--ww); height: 260px; cursor: pointer; }.ball { --hh: 15px; position: absolute; border-radius: 50%; transition: .15s; }.ball::before { position: absolute; content: ''; width: 2px; height: var(--hh); left: calc(50% - 1px); top: 100%; background: linear-gradient(hsla(0,0%,90%,.25),transparent); transform-origin: 50% 0; }</style><div id="mplayer"></div>,`};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;let ballSize = data.size;mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();(function () {let gap = 2;let maWidth = mplayer.offsetWidth;let total = Math.round(maWidth / (ballSize + gap + 1));if(total % 2 != 0 ) total -= 1;let audCtx = new AudioContext();let audSrc = audCtx.createMediaElementSource(aud);audSrc.crossorigin = 'anonymous';let analyser = audCtx.createAnalyser();audSrc.connect(analyser);analyser.connect(audCtx.destination);mplayer.style.cssText += `bottom: ${ballSize + gap}px;`;for(j=0; j<total; j++) {let el = document.createElement('span');let xx = j%2 === 0 ? maWidth/2 + (ballSize + gap) * j / 2 : maWidth/2 - (ballSize + gap) * (j-1) / 2 - ballSize;el.className = 'ball';el.style.cssText += `width: ${ballSize}px; height: ${ballSize}px; left: ${xx}px; background: linear-gradient(135deg,hsla(${Math.ceil(Math.random()*360)},${Math.round(Math.random()*100)}%,${Math.round(Math.random()*50)}%,.75),hsla(${Math.ceil(Math.random()*360)},100%,50%,.75))`;mplayer.appendChild(el);}let voiceHeight = new Uint8Array(analyser.frequencyBinCount);let balls = document.querySelectorAll('.ball');(function draw() {analyser.getByteFrequencyData(voiceHeight);let step = Math.round(voiceHeight.length / total);for (let j = 0; j < total; j++) {let a8h = voiceHeight;balls.style.top = mplayer.offsetHeight - a8h/2 + 'px';balls.style.setProperty('--hh',a8h/2 + 'px');}window.requestAnimationFrame(draw);})();})();};mkPlayer.HCPlayer = playCode;})(this);
HCPlayer({size: 58});
})();
</script> 预祝清舟朋友春节快乐！ 梦油 发表于 2023-1-19 20:38
预祝清舟朋友春节快乐！
谢谢梦油，一起迎接全新的一年 本帖最后由 绿叶清舟 于 2023-1-19 20:48 编辑
十八年前在一个小论坛玩管理版面时遇到了问题，网上搜解决方法被带到了中年注册了个号在电脑学堂发了个提问贴，在等回答时去各处转转当时其他版块那个严肃劲不好玩，就去了水吧被那个热闹吸引就留了下来 我也是在水区玩的最久的一个，当时是从琪芸山庄去的中年人生论坛，四哥带去的 怎么没有听到声音 球球不止十八粒 小九 发表于 2023-1-19 21:29
怎么没有听到声音
这么快就没声了？ 马黑黑 发表于 2023-1-19 21:31
球球不止十八粒
这个数字能改？都没看过代码{:4_173:} 绿叶清舟 发表于 2023-1-19 21:33
这个数字能改？都没看过代码
看了代码能改 马黑黑 发表于 2023-1-19 21:33
看了代码能改
好象改变一下大小，球的数量也不同了 绿叶清舟 发表于 2023-1-19 21:41
好象改变一下大小，球的数量也不同了
大概就是这意思 马黑黑 发表于 2023-1-19 21:41
大概就是这意思
这里为啥网易的音乐不能用啊 绿叶清舟 发表于 2023-1-19 21:44
这里为啥网易的音乐不能用啊
网易应该能用，歌名是什么 绿叶清舟 发表于 2023-1-19 20:46
十八年前在一个小论坛玩管理版面时遇到了问题，网上搜解决方法被带到了中年注册了个号在电脑学堂发了个提问 ...
快乐的奔儿，月亮的光源{:4_173:} 贴子大气漂亮{:4_204:}{:4_204:} 我也没听到声儿 小九 发表于 2023-1-19 21:46
网易应该能用，歌名是什么
与你同行
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=1899516194&auto=1&height=66"></iframe> 雨中悄然 发表于 2023-1-19 21:48
快乐的奔儿，月亮的光源
是啊，还有靓靓，青山一到晚上各版的猪猪们都来水里了