【沉醉动画】梅花三弄

沉醉的曲

爆汁莓驴

可以全屏退出全屏欣赏动画。手机点唱片全屏，再点画面退出全屏。

沉醉的曲

爆汁莓驴 发表于 2025-1-21 23:10
document.getElementsByTagName('audio')[0].pause();

问好老师，感谢关注鼓励，遥祝冬日安好！

爆汁莓驴

沉醉的曲 发表于 2025-1-22 00:11
问好老师，感谢关注鼓励，遥祝冬日安好！

我在试试，如果可以。音画可以用中画播放器展现，我调整好把代码分享给大家。晚上好

爆汁莓驴

楼主的图片不管是电脑和手机都显示不友好，特别是手机简易和触屏版看不全。
电脑和手机分辨率的差异，让大家难以适从。我现在玩网的时间大部分浪费在兼容上，一切以手机为中心是现在的主流！
我发现大家在实际中有个误区，就是宽度不善用100%。
电脑和手机如此大的差异，但100%是相同的，不管多宽多窄，就是能显示全部。
楼主动画如果宽度按100%（高度忽略）用，手机显示完美！但电脑显示太高了，像个大字报。尽管如此，电脑手机能完全显示，这就是100%的优点 。

还有就是居中的使用。控制高度，没有宽度（不要用），但如果选择居中，宽度在完全显示范围内自动调整。 我贴的代码如下，电脑和手机完美显示。

1. <p align="center"><img id="BD" src="https://pic.imgdb.cn/item/67891997d0e0a243d4f4f1aa.gif" height="400px"></p>

复制代码

总结（手机版图片和视频完整显示）：
1.宽度善用100%（可以忽略高度会自动调整），用px不好控制显示不友好。
2.或者，高度在论坛使用百分比不好使，需用px。宽度不用，通过居中（必须）会自动完整显示（高度要适中，否则比例会失调）


此音画做得非常漂亮！而且符合现在主流（手机款）。展现这样的音画，主要是要在手机有限的屏幕上通过样式的设计完美体现出来，全屏的效果适合电脑屏幕。
音画高度600px，在电脑显示没问题，如果要兼顾手机最好高度矮一点，我选了400px，在手机上已经显得狭长了（楼主贴的代码有些问题，手机显示的宽度更小了）。
我贴的不复杂，就增加了圆角和阴影样式：

1. <p align="center"><img src="https://pic.imgdb.cn/item/67891997d0e0a243d4f4f1aa.gif" height="400px" style="border-radius: 15px;box-shadow: 5px 5px 15px #000;"></p>

复制代码

爆汁莓驴

可以两套样式，即电脑样式和手机样式。然后利用手机看不全的优点（可以化腐朽为神奇），在电脑上显示个按钮，调整为电脑样式变大观看(点下面电脑图标看上面效果)。手机看不到图标点不了，但太大了像素不高电脑又看不清！