大图音画模板（测试）

马黑黑

马黑黑

换图： 中 恢复

【注意】脚本测试中，请留意三楼最新更新的代码！

马黑黑

模板代码

1. <div id="papa"></div>
   
2. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1892270789" autoplay loop></audio>
   
3. 
   
4. <script type="text/javascript">
   
5.         const offsetX  = 81, limit = { x: 1400, y: 900};
   
6.         const loadImage = (src) => {
   
7.                 const img = document.createElement('img');
   
8.                 img.onload = () => {
   
9.                         let w = Math.min(limit.x, img.naturalWidth), h = Math.min(limit.y, img.naturalHeight);
   
10.                         adjust(w,h,src);
    
11.                 };
    
12.                 img.src = src;
    
13.                 img.onerror = () => console.log('图片加载失败！');
    
14.         };
    
15.         const adjust = (width, height, uri) => {
    
16.                 papa.style.cssText += `
    
17.                         position: relative;
    
18.                         width: ${width}px;
    
19.                         height: ${height}px;
    
20.                         left: calc(50% - ${offsetX}px);
    
21.                         transform: translate(-50%);
    
22.                         background: url(${uri}) center / ${width}px ${height}px;
    
23.                         z-index: 1;
    
24.                 `;
    
25.         };
    
26.         const imgUri = 'https://clubimg.club.vmall.com/data/attachment/forum/202006/03/210541xvw70vguz2bjatza.jpg';
    
27.         loadImage(imgUri);
    
28.         papa.onclick = () => aud.paused ? aud.play() : aud.pause();
    
29. </script>

复制代码

马黑黑

说明

帖子HTML只需要一个 id (代码 01 行）；
音频标签按约定 id="aud" （代码 02 行）；

JS需要修改的地方：

    05 行：const offsetX  = 81, limit = { x: 1400, y: 900};
    offsetX 是 偏移量，花潮论坛是 81；limit 里面的是希望帖子的最大宽度和高度限制，1400*900

   26 行：图片地址

马黑黑

本示例图片暂时来源于网络，可能会失效。可以在二楼更换自己的图片，仅支持可用的网络图片。

南无月

1400*900的。。这个高度在论坛或者网站打开刚刚好，没有什么会遮挡。。
试了代码，把1400改1700后所有数据无需做任何更改，就可自动居中了。。

南无月

音画人的福音。。
省了算来算去的麻烦。。
不会出现发不正的贴子了。。

南无月

马黑黑 发表于 2024-6-21 19:51
本帖最后由 马黑黑 于 2024-6-21 20:30 编辑
        换图：
       

原来，换图可以这么简单。。
真是神器，我刚试了一张

马黑黑

南无月 发表于 2024-6-21 21:26
原来，换图可以这么简单。。
真是神器，我刚试了一张

自适应情况咋样

南无月

马黑黑 发表于 2024-6-21 21:26
自适应情况咋样

我换的是一张1700的，自动生成的图片左右自动压缩有点窄。。。

南无月

马黑黑 发表于 2024-6-21 21:26
自适应情况咋样

传图试贴我那个第二页里，我用你的代码改成1700，正常居中显示

马黑黑

南无月 发表于 2024-6-21 21:28
我换的是一张1700的，自动生成的图片左右自动压缩有点窄。。。

这里是限宽高的：宽度大于 1400 的是1400，高度大于 900 的是900

马黑黑

南无月 发表于 2024-6-21 21:29
传图试贴我那个第二页里，我用你的代码改成1700，正常居中显示

limit: {x: ..., y: ...} 可以自行设定

南无月

马黑黑 发表于 2024-6-21 21:31
limit: {x: ..., y: ...} 可以自行设定

好哒，我习惯1700*900的图，就改成这个数据了

南无月

马黑黑 发表于 2024-6-21 21:29
这里是限宽高的：宽度大于 1400 的是1400，高度大于 900 的是900

大点呗。。

马黑黑

南无月 发表于 2024-6-21 21:34
大点呗。。

可以自己改的

马黑黑

南无月 发表于 2024-6-21 21:33
好哒，我习惯1700*900的图，就改成这个数据了

都行

马黑黑

南无月 发表于 2024-6-21 20:26
音画人的福音。。
省了算来算去的麻烦。。
不会出现发不正的贴子了。。

音乐还提供了可控的操作

小辣椒

黑黑这个大图尺寸刚好，许多人电脑都刚好，许多人的电脑分辨率1440X900 记得上次我做了个大图1920的宽度，红影说下面有拉条要移动看了，我就晓得她的分辨率是1440X900 所以黑黑这个尺寸刚好，其实许多人做的大图尺寸，别人看不全的。

执著

大图模板代码好像还简单些