沉醉的曲 发表于 2025-1-21 21:12

【沉醉动画】梅花三弄

333333333333

爆汁莓驴 发表于 2025-1-21 23:10

<p align="center"><iframe id="frm"height="345px" frameborder="0" scrolling="no" allowfullscreen="true" allowtransparency="true" src="http://pan.yinhuabbs.cn/uploads/bzml/BFQ/ZHWB0000-yh.html?url=224291&txt=%E3%80%90%E6%B2%89%E9%86%89%E5%8A%A8%E7%94%BB%E3%80%91%E6%A2%85%E8%8A%B1%E4%B8%89%E5%BC%84&img=https://pic.imgdb.cn/item/67891917d0e0a243d4f4f065.gif&fx=https://wimg.588ku.com/gif620/21/10/12/7b51ff26e46d7781e498521173c17aea.gif&autoplay=1"></iframe></p><br><br>
<p align="center"><input type="button" value="动画1" style="background-color:YellowGreen" onclick="frm.src='http://pan.yinhuabbs.cn/uploads/bzml/BFQ/ZHWB000-yh.html?url=224291&txt=%E3%80%90%E6%B2%89%E9%86%89%E5%8A%A8%E7%94%BB%E3%80%91%E6%A2%85%E8%8A%B1%E4%B8%89%E5%BC%84&img=https://pic.imgdb.cn/item/67891917d0e0a243d4f4f065.gif&fx=https://wimg.588ku.com/gif620/21/10/12/7b51ff26e46d7781e498521173c17aea.gif&fit=ntain&autoplay=1'"> <input type="button" value="动画2" style="background-color:YellowGreen" onclick="frm.src='http://pan.yinhuabbs.cn/uploads/bzml/BFQ/ZHWB000-yh.html?url=224291&txt=%E3%80%90%E6%B2%89%E9%86%89%E5%8A%A8%E7%94%BB%E3%80%91%E6%A2%85%E8%8A%B1%E4%B8%89%E5%BC%84&img=https://pic.imgdb.cn/item/67891997d0e0a243d4f4f1aa.gif&fx=https://wimg.588ku.com/gif620/21/10/12/7b51ff26e46d7781e498521173c17aea.gif&fit=ntain&autoplay=1'"> <input type="button" value="动画3" style="background-color:YellowGreen" onclick="frm.src='http://pan.yinhuabbs.cn/uploads/bzml/BFQ/ZHWB000-yh.html?url=224291&txt=%E3%80%90%E6%B2%89%E9%86%89%E5%8A%A8%E7%94%BB%E3%80%91%E6%A2%85%E8%8A%B1%E4%B8%89%E5%BC%84&img=https://pic.imgdb.cn/item/67891a1ad0e0a243d4f4f27b.gif&fx=https://wimg.588ku.com/gif620/21/10/12/7b51ff26e46d7781e498521173c17aea.gif&fit=ntain&autoplay=1'"></p>
可以全屏退出全屏欣赏动画。手机点唱片全屏，再点画面退出全屏。<br>
右侧按钮用于电脑调整高度适合电脑观看（手机不可见，忽略）
<input type="image" src="https://img95.699pic.com//svg/cp/aaa/3e0/c96/afa/8.svg" style="width:40px;margin-left:485px" onclick="frm.style.width='auto';frm.style.height='450px';return false" title="电脑调整">

爆汁莓驴 发表于 2025-1-22 00:21

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

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

爆汁莓驴 发表于 2025-1-22 01:16

<p align="center"><img id="BBD" src="https://pic.imgdb.cn/item/67891997d0e0a243d4f4f1aa.gif" height="400px" style="border-radius: 15px;box-shadow: 5px 5px 15px #000;"></p><br>
楼主的图片不管是电脑和手机都显示不友好，特别是手机简易和触屏版看不全。<br>
电脑和手机分辨率的差异，让大家难以适从。我现在玩网的时间大部分浪费在兼容上，一切以手机为中心是现在的主流！<br>
我发现大家在实际中有个误区，就是宽度不善用100%。<br>
电脑和手机如此大的差异，但100%是相同的，不管多宽多窄，就是能显示全部。<br>
楼主动画如果宽度按100%（高度忽略）用，手机显示完美！但电脑显示太高了，像个大字报。尽管如此，电脑手机能完全显示，这就是100%的优点 。<br><br>
还有就是居中的使用。控制高度，没有宽度（不要用），但如果选择居中，宽度在完全显示范围内自动调整。
我贴的代码如下，电脑和手机完美显示。
<p align="center"><img id="BD" src="https://pic.imgdb.cn/item/67891997d0e0a243d4f4f1aa.gif" height="400px"></p>
总结（手机版图片和视频完整显示）：<br>
1.宽度善用100%（可以忽略高度会自动调整），用px不好控制显示不友好。<br>
2.或者，高度在论坛使用百分比不好使，需用px。宽度不用，通过居中（必须）会自动完整显示（高度要适中，否则比例会失调）
<br><br><br>
此音画做得非常漂亮！而且符合现在主流（手机款）。展现这样的音画，主要是要在手机有限的屏幕上通过样式的设计完美体现出来，全屏的效果适合电脑屏幕。<br>
音画高度600px，在电脑显示没问题，如果要兼顾手机最好高度矮一点，我选了400px，在手机上已经显得狭长了（楼主贴的代码有些问题，手机显示的宽度更小了）。<br>
我贴的不复杂，就增加了圆角和阴影样式：<br>
<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>




爆汁莓驴 发表于 2025-1-22 06:54

可以两套样式，即电脑样式和手机样式。然后利用手机看不全的优点（可以化腐朽为神奇），在电脑上显示个按钮，调整为电脑样式变大观看(点下面电脑图标看上面效果)。手机看不到图标点不了，但太大了像素不高电脑又看不清！:lol <input type="image" src="https://img95.699pic.com//svg/cp/aaa/3e0/c96/afa/8.svg" style="width:40px;margin-left:480px" onclick="BBD.style.height='800px';return false" title="电脑调整">


爆汁莓驴 发表于 2025-1-22 23:38

现在大家大多数用手机看帖子，你虽然用电脑发帖，但手机一样会显示，如果看不到电脑上显示的效果，或看不全，发帖意义不如让大多数人都能欣赏到。<br>

手机一共有3个版面，如果是APP上网，可能电脑版看不到，使用手机可能都喜欢触屏版和简易版，适合手机。这样，你的发帖手机用户除非看电脑版，否则基本看不到。
你的贴手机效果（触屏版）：
<p align="center"><img id="BD" src="http://www.yinhuabbs.cn/data/attachment/forum/202501/22/233706sxpwfw1erqkcprkt.jpg" height="500px"></p>
只能看一半

爆汁莓驴 发表于 2025-1-22 23:50

可以正常显示。我的回复效果
<p align="center"><img id="BD" src="http://www.yinhuabbs.cn/data/attachment/album/202501/22/234955a7xggieym7uuixwz.jpg" height="500px"></p>
<p align="center"><img id="BD" src="http://www.yinhuabbs.cn/data/attachment/album/202501/22/235510nccz4u5p2c2qyqtp.jpg" height="500px"></p>

么念 发表于 2025-2-10 15:27

咋了，都是3，:(
页: [1]
查看完整版本: 【沉醉动画】梅花三弄