试试声音-谢谢自强老师的美图

廖若晨星

谢谢邢大选老师 试试声音-谢谢自强老师的美图   听到声音了

邢大选

听柳 发表于 2026-9-13 15:30
欢迎您常来贴图版块！贴图版块刚开通HTML代码，我刚了一个帖子测试，我准备再测试几个添加音乐的动图后，和 ...

谢谢听柳版主第一时间关注！
谢谢版主的欢迎！我不会做动图也不太懂音乐，所以肯定极少在贵版发帖。这个帖只是剽窃别人的代码，试着玩玩。
我也不太会解释代码，17#楼的回复把我这个帖子的代码复制出来供参考。

山水人家

我没听见！

邢大选

沧海笑 发表于 2026-9-13 17:22
能听到声音！

谢谢回帖反馈！

邢大选

老知青自强不息 发表于 2026-9-13 17:35
谢谢邢大选老师的鼎力支持和抬爱！清脆悦耳的朗诵让拙作蓬荜生辉了！非常棒！衷心希望老师常来【可爱贴图】 ...

未经允许用了自强老师的佳作，谢谢支持！

老知青自强不息

邢大选 发表于 2026-9-14 12:02
未经允许用了自强老师的佳作，谢谢支持！

邢老师中午好！没事没事，只要是用得着的图片，您尽管拿去用。咱们在老网相遇相识就是缘分，只要对繁荣老网活跃版块有利，我绝对支持！您千万别客气！中午好！

邢大选

肖燕 发表于 2026-9-13 18:18
我听到声音了。您是如何设置动图有声的代码的？希望与大家分享一下！谢谢！

谢谢回帖反馈！

我不太懂代码的，只是看到别人的帖子，扒下代码套用了一下，这个是我在别的论坛看到的帖子（编辑帖子明明链接有效的，发布时又没了，想看就复制粘贴到浏览器吧）：
https://www.huachaowang.com/forum.php?mod=viewthread&tid=95412&extra=page%3D3

下面是我这个帖子的代码，懂代码的朋友自己琢磨吧，我只会照虎画猫，里面的具体意思我根本不知道哈：

1. <style>
   
2. @import url(https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&family=Long+Cang&display=swap);
   
3. :root        {--w:1080px; --h:720px;--pn:3;}
   
4. #oBlk        {
   
5.         position:relative;width:var(--w);height:var(--h);overflow:hidden;
   
6.         border-radius:32px;box-shadow:4px 4px 10px black;
   
7.         margin: 32px auto 40px calc(50% - var(--w) / 2 - 81px);
   
8.         
   
9.         #pichold        {
   
10.                 width:calc(var(--pn) * var(--w));height:var(--h);position:absolute;left:0px;top:0px;
    
11.                 animation: mtol 102s steps(var(--pn)) infinite;
    
12.                 &:hover        {
    
13.                         animation-play-state:paused;
    
14.                 }
    
15.                 img        {width:1080px;height:720px;float:left;}
    
16.                
    
17.                 .stle {
    
18.                         position:absolute;top:50px;font: bold 2.5em 'ZCOOL KuaiLe';color:white;
    
19.                         text-shadow: 1px 1px brown, -1px 1px brown, -1px -1px brown, 1px -1px brown;
    
20.                 }
    
21.         }
    
22.         #desc        {
    
23.                 position:absolute;left:100px;bottom:20px;
    
24.                 font: bold 2.5em 'Long Cang';
    
25.     color:white;
    
26.     text-shadow: 1px 1px #368171, -1px 1px #368171, -1px -1px #368171, 1px -1px #368171;
    
27.         }
    
28.         
    
29. }
    
30. @keyframes mtol        {
    
31.         to {left: calc(-1 * var(--pn) * var(--w));}
    
32. }
    
33. </style>
    
34. <div id="oBlk">
    
35.                 <div id="pichold">
    
36.                 <img src="https://matuimg.com/m/2026/09/09/f9vrkq.gif"/>
    
37.                 <img src="https://matuimg.com/m/2026/09/09/f9vrkq.gif"/>
    
38.         <img src="https://matuimg.com/m/2026/09/09/f9vrkq.gif"/>
    
39. 
    
40.         </div>
    
41.         <p id='desc'></p>
    
42. </div>
    
43. <script>
    
44. const descTxt        = [
    
45. `忙里偷闲逛花园，古城梅香扑面来，写意牡丹没看够，又见桃花满枝头。`,
    
46. `忙里偷闲逛花园，古城梅香扑面来，写意牡丹没看够，又见桃花满枝头。`,
    
47. `忙里偷闲逛花园，古城梅香扑面来，写意牡丹没看够，又见桃花满枝头。`,
    
48. ];
    
49. const imgObjs = pichold.querySelectorAll('img');
    
50. const synthObj = window.speechSynthesis;
    
51. const pn = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--pn'));
    
52. const vW = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--w'));
    
53. 
    
54. imgObjs.forEach((imgObj, idx) => {
    
55.         let dm = descTxt[idx].substr(2, descTxt[idx].substr(2).indexOf('才'));
    
56.         let spanObj = document.createElement('span');
    
57.         spanObj.innerHTML = dm;
    
58.         spanObj.style.left = (vW * idx + 50) + 'px';
    
59.         spanObj.className = 'stle';
    
60.         pichold.appendChild(spanObj);
    
61.         
    
62.         imgObj.onmouseenter = () => {
    
63.                 desc.innerHTML = descTxt[idx % pn];
    
64.                     synthObj.cancel();
    
65.                     let voiceObj = new SpeechSynthesisUtterance(descTxt[idx % pn]);
    
66.                     voiceObj.lang = "zh-CN";
    
67.                     voiceObj.rate = 0.7; //语速，数字越小读得越慢
    
68.                     synthObj.speak(voiceObj);
    
69.         }
    
70.         imgObj.onmouseout = () => {
    
71.                 desc.innerHTML = '';
    
72.                 synthObj.cancel();
    
73.         }
    
74. })
    
75. </script>

复制代码

邢大选

廖若晨星 发表于 2026-9-13 19:23
谢谢邢大选老师 试试声音-谢谢自强老师的美图   听到声音了

谢谢老师回帖反馈！

邢大选

山水人家 发表于 2026-9-14 11:28
我没听见！

别人能听见啊，那是您的问题了。

鼠标移动到画面上了吗？

肖燕

邢大选 发表于 2026-9-14 12:18
谢谢回帖反馈！

我不太懂代码的，只是看到别人的帖子，扒下代码套用了一下，这个是我在别的论坛看到的 ...

谢谢告知您做有音乐的GIF代码的方法。您这个代码好长，我们做有一定难度。您不太懂这些代码，我一样不懂，都是照猫画虎。