胡杨【TO:千羽】（学习黑师《罗刹海市》小圆播封装歌词效果）
本帖最后由 花飞飞 于 2023-8-10 17:20 编辑 <br /><br /><style>#mydiv { margin: 0 0 0 calc(50% - 720px); width: 1300px; height: 700px; background: url('https://s1.ax1x.com/2023/08/03/pPih5uT.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; position: relative; overflow: hidden;}#vid {
position: absolute;
width: 120%;
height: 110%;
top:-10px;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
z-index: 2;
opacity: .25;
}</style><div id="mydiv"><video id="vid" src="https://img.tukuppt.com/video_show/2629112/00/02/03/5b4f2ae929323.mp4" autoplay="" loop="" muted=""></video></div><audio id="aud" src="https://music.163.com/song/media/outer/url?id=77324" autoplay="" loop=""></audio>
<script>
(function() {
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/circle_lrc.js';
document.head.appendChild(script);
let lrcAr = [ , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ];
window.onload = () => {
HCPlayer({
papa: '#mydiv',
lrcAr: lrcAr,
lrc_css: 'bottom: 10px;font: bold 30px/38px sans-serif;color: Azure; --bg: PaleTurquoise;',
player_css: 'right: 50px; bottom: 10px;',
});
}
})();
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script> @千羽 练了几天图，挑张比较满意的送给亲爱的羽宝~~谢谢你一直关注我的学习进度，一直无条件的帮我~~{:4_183:} @马黑黑 它又咋了？你过了目才发的。。。{:4_198:} 好漂亮的画面，歌曲也极有特色。飞飞好美的制作{:4_199:} 没看到歌词和播放器啊{:4_203:} 花飞飞 发表于 2023-8-3 20:29
@马黑黑 它又咋了？你过了目才发的。。。
论坛和自由网站发帖环境不尽一致。你这里，根本就没有导入插件，这是问题一，问题二是，要通过 window.onload 加载插件，论坛的帖子才能正常运行。JS部分代码应调整如下：
<script>
(function() {
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/circle_lrc.js';
document.head.appendChild(script);
let lrcAr = [ , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ];
window.onload = () => {
HCPlayer({
papa: '#mydiv',
lrcAr: lrcAr,
lrc_css: 'bottom: 10px;font: bold 30px/38px sans-serif;color: Azure; --bg: PaleTurquoise;',
player_css: 'right: 50px; bottom: 10px;',
});
}
})();
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>
红影 发表于 2023-8-3 20:52
好漂亮的画面，歌曲也极有特色。飞飞好美的制作
谢谢影子，瞧我这一个贴子整得一头汗。。{:4_170:} 马黑黑 发表于 2023-8-3 20:59
论坛和自由网站发帖环境不尽一致。你这里，根本就没有导入插件，这是问题一，问题二是，要通过 window.on ...
{:4_170:}我真是昏头了……之前知道发论坛和网站有不同的，这次却给忘了。。。。 马黑黑 发表于 2023-8-3 20:59
论坛和自由网站发帖环境不尽一致。你这里，根本就没有导入插件，这是问题一，问题二是，要通过 window.on ...
估计手忙脚乱还得一阵子{:4_173:} 红影 发表于 2023-8-3 20:53
没看到歌词和播放器啊
翻车了……论坛和网站代码不太一样。。{:4_173:} 花飞飞 发表于 2023-8-3 21:07
估计手忙脚乱还得一阵子
替换上JS就行了 花飞飞 发表于 2023-8-3 21:06
我真是昏头了……之前知道发论坛和网站有不同的，这次却给忘了。。。。
这叫顾此失彼 花飞飞 发表于 2023-8-3 21:02
谢谢影子，瞧我这一个贴子整得一头汗。。
没事啊，不急的，慢慢来{:4_184:} 花飞飞 发表于 2023-8-3 21:07
翻车了……论坛和网站代码不太一样。。
看到飞飞改好了，真漂亮{:4_199:} 马黑黑 发表于 2023-8-3 21:08
替换上JS就行了
各种问题层出不穷。。。还是得先试贴。。。{:4_173:} 花飞飞 发表于 2023-8-3 21:21
各种问题层出不穷。。。还是得先试贴。。。
试试就试试 马黑黑 发表于 2023-8-3 21:08
这叫顾此失彼
{:4_181:}我就是顾此失彼。。手忙脚乱……五体投地。。 花飞飞 发表于 2023-8-3 21:22
我就是顾此失彼。。手忙脚乱……五体投地。。
{:4_172:} 红影 发表于 2023-8-3 21:11
没事啊，不急的，慢慢来
{:4_183:}好哒，影子最好了 红影 发表于 2023-8-3 21:11
看到飞飞改好了，真漂亮
{:4_170:}真是好不容易。。。