前言:

这个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():定义了两个函数,分别在鼠标悬停和按下时播放对应的音频。

分析:

图像交互:通过 onmouseoveronmousedown 属性,将图像与音频播放关联起来,实现了鼠标悬停和按下时不同音频的触发。

  • 音频元素:定义了两个不同的音频文件,分别通过 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>

音频文件下载:

https://www.lanzoub.com/iOpg21xw6cbg