岚儿 发表于 2025-2-9 00:21
周末快乐！
欢迎岚儿，感谢您的问候，恭祝春安！！
三月梅 发表于 2025-2-8 21:38
我找到了图片滚动的代码，会用了，但是让GIF图片定位到滚动的图片上面，我还不会。您有时间的话还请您给 ...
这个音画播放器，我也是看论坛很多音画作品，由于展现特别是手机不理想的状况下尝试做的。我一直在完善，目的就是大家使用起来方便，前期发的音画播放器代码一般可以适合大家发的作品。你有心想使用这款播放器，我把还在完善的（适合很长的画，如千里江山图）先分享给你。
http://pan.yinhuabbs.cn/uploads/bzml/BFQ/yh.html?url=音乐连接（具体见先前发的）&tx=头像图片（正方形，自己的头像）&yy=音乐特效（背景透明gif，可以自己制作）&bj=音画图片（大家制作的一般为满贯屏幕的大图，也可卷画，手机比例的图也行）&fx=特效图片（背景透明gif图片，可以自己制作）&autoplay=0或者1（是否自动播放音乐）
这几个参数是最基本的，能完美展现图片，其他参数是调节用的，我现在尽量打包在代码里。<br>
代码比较复杂，这个一时半会教不好，我也是半路出家零星攒的，不是编程专业系统学的，不过接触时间久了反复实践可以无师自通。<br>
代码写的最后形成网页文件，格式html。我做的音画播放器就是这样形成的，在连接上（问号后面）设几个参数，供大家自由组合使用。使用者就像玩图片软件一样，自由发挥，最后展现出自己的音画作品，我其实是提供一种展现方法，真正的有内涵有水平的是你们的作品。<br>
音画作品的尺寸播放器会自动识别加以展现。
爆汁莓驴 发表于 2025-2-9 02:04
这个音画播放器，我也是看论坛很多音画作品，由于展现特别是手机不理想的状况下尝试做的。我一直在完善 ...
谢爆汁的指点，很荣幸！我好好看一下您的帖子。争取尽快掌握。
恭祝春安！！
<div style="position:relative; left: -200px;"><img src="https://cccimg.com/view.php/c72921fc6252538022185e6fae4afac6.jpeg"></img>
<img style="position:absolute; left:600px; top: -60px; transform: scaleX(-1)" width=600 height=450 src="https://img.fy6b.com/2023/05/08/8481a68a0ec11.gif"></img>
<iframe frameborder=0 width=0 src="http://www.5nd.com/ting/608201.html"></iframe></div>
<div style="position:relative; left: -200px;">
<img style="position:absolute; left:600px; top: -60px; transform: scaleX(-1)" width=600 height=450 src="https://img.fy6b.com/2023/05/08/8481a68a0ec11.gif"></img>
<iframe frameborder=0 width=0 src="http://www.5nd.com/ting/608201.html"></iframe></div>
<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_11849890">
<meta name="referrer" content="never" /><style>
@import 'https://638183.freep.cn/638183/web/mod/mp3player_lrc_v1.css?v=1.0';
#tz {
margin: 0 auto; /* 自动居中 */
width: 1024px;
height:576px;
background: url('https://cccimg.com/view.php/e4447eb38137392cd8dfba6d906ad477.jpeg') no-repeat center/cover;
overflow: auto;
border-radius: 32px;
border: thick double SkyBlue;
}
`css
#xiaoqiu {
width: 1200px;
height: 150px;
top: 68%;
left: 3%;
css
#mplayer {
width: 100%; /* 或者 50% */
max-width: 580px; /* 防止过大 */
bottom: 10px;
background: none;
box-shadow: none;
color: Aqua;
}
#mplayer img { filter: invert(.8); }
css
#prog {
background-color: var(--prog, #87CEFA); /* 默认颜色为 #87CEFA */
}
``css
#tz {
max-width: 100%;
overflow: hidden;
}
css
@media (max-width: 1280px) {
#tz {
width: 100%;
height: auto;
margin: 0;
}
}
#llrc {
left: 50%; /* 调整为居中 */
transform: translateX(-50%); /* 确保完全居中 */
bottom: -40px;
}
#fsbtn { top: 30px; left: 48%; }
.vid { opacity: 0.55; }
</style>
<div id="tz" class="pa">
<audio src="https://img2.oldkids.cn/upload/2025/03/16/blog_260798238_20250316144352412.mp3"></audio>
<video class="vid" src="https://cccimg.com/view.php/85549f7a56d26714002df2df83e45a34.mp4" autoplay loop muted></video>
<div id="xiaoqiu"></div>
</div>