小辣椒 发表于 2024-6-23 14:30

一图 一歌 TO：樵哥哥

<div id="papa"></div>
<audio id="aud" src="https://s1.ananas.chaoxing.com/sv-w9/audio/67/f7/67/90fac00d501c10e4212fc25e03992f10/audio.mp3" autoplay loop></audio>

<script type="text/javascript">
      const offsetX= 81, limit = { x: 1280, y: 732};
      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://file.uhsea.com/2406/69c94a3f01b5e6c8064e95b6f3bef14d21.jpg ';
      loadImage(imgUri);
      papa.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

小辣椒 发表于 2024-6-23 14:39

@马黑黑

黑黑我发现这个如果电脑不是设置自动播放，要提醒点击画面音乐出来，还有我不改尺寸，出来也是图图的实际尺寸

起个网名好难 发表于 2024-6-23 14:59

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

小辣椒 发表于 2024-6-23 15:02

起个网名好难 发表于 2024-6-23 14:59


难难，刚好樵哥哥说一个图一个音乐也是不错的效果，我就试一下了{:4_173:}

起个网名好难 发表于 2024-6-23 15:05

小辣椒 发表于 2024-6-23 14:39
@马黑黑

黑黑我发现这个如果电脑不是设置自动播放，要提醒点击画面音乐出来，还有我不改尺寸，出来也是 ...

不改尺寸，出来也是图图的实际尺寸

宽度 = min(1400, 1280), 高度 = min(900, 732) , 所用的图片小于1400X900 自然就用了 1280X732

小辣椒 发表于 2024-6-23 15:12

起个网名好难 发表于 2024-6-23 15:05
宽度 = min(1400, 1280), 高度 = min(900, 732) , 所用的图片小于1400X900 自然就用了 1280X732

哦，这样啊，谢谢难难告知{:4_187:}

小辣椒 发表于 2024-6-23 15:13

起个网名好难 发表于 2024-6-23 15:05
宽度 = min(1400, 1280), 高度 = min(900, 732) , 所用的图片小于1400X900 自然就用了 1280X732

我这里是这样设置的
const offsetX= 81, limit = { x: 1280, y: 732};

起个网名好难 发表于 2024-6-23 15:16

小辣椒 发表于 2024-6-23 15:13
我这里是这样设置的
const offsetX= 81, limit = { x: 1280, y: 732};

这样就失去了比较的意义，原意是限制图片最大尺寸为1400X900，即不超过。

小辣椒 发表于 2024-6-23 15:19

起个网名好难 发表于 2024-6-23 15:16
这样就失去了比较的意义，原意是限制图片最大尺寸为1400X900，即不超过。

哦，那我知道了，这样就随便什么小图就可以直接用了，谢谢难难

南无月 发表于 2024-6-23 15:58

图漂亮，歌好听~~{:4_187:}

马黑黑 发表于 2024-6-23 16:35

小辣椒 发表于 2024-6-23 14:39
@马黑黑

黑黑我发现这个如果电脑不是设置自动播放，要提醒点击画面音乐出来，还有我不改尺寸，出来也是 ...

你动了这个地方：

limit = { x: 1280, y: 732}

这是极限，图片实际尺寸小于它时用图片的尺寸，否则用这个尺寸。

梦风雨 发表于 2024-6-23 16:39

唯美的画面，浪漫的情怀。{:4_191:}

红影 发表于 2024-6-23 17:15

好漂亮的图图，这样的场景里相依相偎好幸福啊{:4_199:}

老谟深虑 发表于 2024-6-23 18:56

         很遗憾，我看不到图片，只听到歌声。

樵歌 发表于 2024-6-23 21:08

幸亏我来看了一下，不然呼呼切了。
真好，还有礼物收{:4_187:}
谢谢啦{:4_190:}{:4_183:}

樵歌 发表于 2024-6-23 21:11

水墨丹青山水意境极好，有仙鹤，还一对璧人。歌好听，人儿美。{:4_189:}

樵歌 发表于 2024-6-23 21:12

正好那个微信上的怎么也传不到电脑上。{:4_189:}

樵歌 发表于 2024-6-23 21:14

img.onerror = () => console.log('图片加载失败！')
~~~这是啥呀？{:4_203:}

小辣椒 发表于 2024-6-25 13:43

马黑黑 发表于 2024-6-23 16:35
你动了这个地方：

limit = { x: 1280, y: 732}


好的，明白了

小辣椒 发表于 2024-6-25 13:44

梦风雨 发表于 2024-6-23 16:39
唯美的画面，浪漫的情怀。

问好风雨，谢谢欣赏{:4_171:}
页: [1] 2 3
查看完整版本: 一图 一歌 TO：樵哥哥