大图音画模板（测试）
本帖最后由 马黑黑 于 2024-6-21 22:27 编辑 <br /><br /><div id="papa"></div><audio id="aud" src="https://music.163.com/song/media/outer/url?id=1892270789" autoplay loop></audio>
<script type="text/javascript">
const offsetX= 81, limit = { x: 1400, y: 900};
const loadImage = (src) => {
const img = document.createElement('img');
img.onload = () => {
let w = Math.min(limit.x, img.naturalWidth), h = Math.min(limit.y, img.naturalHeight);
adjust(w,h,src);
};
img.src = src;
img.onerror = () => console.log('图片加载失败！');
};
const adjust = (width, height, uri) => {
papa.style.cssText += `
position: relative;
width: ${width}px;
height: ${height}px;
left: calc(50% - ${offsetX}px);
transform: translate(-50%);
background: url(${uri}) center / ${width}px ${height}px;
z-index: 1;
`;
};
const imgUri = 'https://clubimg.club.vmall.com/data/attachment/forum/202006/03/210541xvw70vguz2bjatza.jpg';
loadImage(imgUri);
papa.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
本帖最后由 马黑黑 于 2024-6-21 22:31 编辑 <br /><br /><p>
<label for="txtImage">换图：</label>
<input id="txtImage" type="text" value="" size="80">
<button class="btns" value="0">中</button>
<button class="btns" value="1">恢复</button>
</p>
<p><br></p>
<h2 style="color: red;">【注意】脚本测试中，请留意三楼最新更新的代码！</h2>
<script>
const btns = document.querySelectorAll('.btns');
btns.forEach(btn => {
btn.onclick = () => {
let key = btn.value;
let ar = ;
loadImage(ar);
};
});
</script>
本帖最后由 马黑黑 于 2024-6-21 22:27 编辑
模板代码<div id="papa"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1892270789" autoplay loop></audio>
<script type="text/javascript">
const offsetX= 81, limit = { x: 1400, y: 900};
const loadImage = (src) => {
const img = document.createElement('img');
img.onload = () => {
let w = Math.min(limit.x, img.naturalWidth), h = Math.min(limit.y, img.naturalHeight);
adjust(w,h,src);
};
img.src = src;
img.onerror = () => console.log('图片加载失败！');
};
const adjust = (width, height, uri) => {
papa.style.cssText += `
position: relative;
width: ${width}px;
height: ${height}px;
left: calc(50% - ${offsetX}px);
transform: translate(-50%);
background: url(${uri}) center / ${width}px ${height}px;
z-index: 1;
`;
};
const imgUri = 'https://clubimg.club.vmall.com/data/attachment/forum/202006/03/210541xvw70vguz2bjatza.jpg';
loadImage(imgUri);
papa.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
本帖最后由 马黑黑 于 2024-6-21 20:40 编辑
说明
帖子HTML只需要一个 id (代码 01 行）；
音频标签按约定 id="aud" （代码 02 行）；
JS需要修改的地方：
05 行：const offsetX= 81, limit = { x: 1400, y: 900};
offsetX 是 偏移量，花潮论坛是 81；limit 里面的是希望帖子的最大宽度和高度限制，1400*900
26 行：图片地址
本帖最后由 马黑黑 于 2024-6-21 20:42 编辑
本示例图片暂时来源于网络，可能会失效。可以在二楼更换自己的图片，仅支持可用的网络图片。 1400*900的。。这个高度在论坛或者网站打开刚刚好，没有什么会遮挡。。
试了代码，把1400改1700后所有数据无需做任何更改，就可自动居中了。。{:4_199:} 音画人的福音。。{:4_199:}
省了算来算去的麻烦。。
不会出现发不正的贴子了。。 马黑黑 发表于 2024-6-21 19:51
本帖最后由 马黑黑 于 2024-6-21 20:30 编辑
换图：
原来，换图可以这么简单。。{:4_199:}
真是神器，我刚试了一张 南无月 发表于 2024-6-21 21:26
原来，换图可以这么简单。。
真是神器，我刚试了一张
自适应情况咋样 马黑黑 发表于 2024-6-21 21:26
自适应情况咋样
我换的是一张1700的，自动生成的图片左右自动压缩有点窄。。。 马黑黑 发表于 2024-6-21 21:26
自适应情况咋样
传图试贴我那个第二页里，我用你的代码改成1700，正常居中显示{:4_173:} 南无月 发表于 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: ...} 可以自行设定
{:4_170:}好哒，我习惯1700*900的图，就改成这个数据了 马黑黑 发表于 2024-6-21 21:29
这里是限宽高的：宽度大于 1400 的是1400，高度大于 900 的是900
{:4_173:}大点呗。。 南无月 发表于 2024-6-21 21:34
大点呗。。
可以自己改的 南无月 发表于 2024-6-21 21:33
好哒，我习惯1700*900的图，就改成这个数据了
都行 南无月 发表于 2024-6-21 20:26
音画人的福音。。
省了算来算去的麻烦。。
不会出现发不正的贴子了。。
音乐还提供了可控的操作 黑黑这个大图尺寸刚好，许多人电脑都刚好，许多人的电脑分辨率1440X900 记得上次我做了个大图1920的宽度，红影说下面有拉条要移动看了，我就晓得她的分辨率是1440X900 所以黑黑这个尺寸刚好，其实许多人做的大图尺寸，别人看不全的。 大图模板代码好像还简单些{:4_205:}