前言：
这个js特效是昨天群友看到的，然后我看了一下还不错，鼠标指针触碰到图片就会触发音乐音效，点击一下也会触发另外一种音效。话不多说直接上代码，下面有源码演示示例。
原理：
-
<img src="b79e2fce3c1d3b3d8da5266361751efa.jpeg" id="myImage" onmouseover="playAudioOnEnter()" onmousedown="playAudioOnClick()"/>：定义了一个图像元素，指定了图像的路径，并添加了鼠标悬停和按下时的事件处理函数。 -
<audio id="audio" src="DM_20240505234337_001.mp3"></audio>和<audio id="audio2" src="DM_20240505234337_003.mp3"></audio>：分别定义了两个音频元素，指定了音频文件的路径。 -
function playAudioOnEnter()和function playAudioOnClick()：定义了两个函数，分别在鼠标悬停和按下时播放对应的音频。
分析：
图像交互：通过 onmouseover 和 onmousedown 属性，将图像与音频播放关联起来，实现了鼠标悬停和按下时不同音频的触发。
-
音频元素：定义了两个不同的音频文件，分别通过
id进行区分，并在相应的事件处理函数中进行播放控制。 -
JavaScript 函数：
playAudioOnEnter函数在鼠标进入图像时播放指定的音频，playAudioOnClick函数在鼠标按下图像时播放另一个音频。
代码：
<img src="b79e2fce3c1d3b3d8da5266361751efa.jpeg" id="myImage" onmouseover="playAudioOnEnter()" onmousedown="playAudioOnClick()" />
<audio id="audio" src="DM_20240505234337_001.mp3"></audio>
<audio id="audio2" src="DM_20240505234337_003.mp3"></audio>
<script>
function playAudioOnEnter() {
var audio = document.getElementById('audio');
audio.play();
}
function playAudioOnClick() {
var audio = document.getElementById('audio2');
audio.play();
}
</script>音频文件下载：
0