漫川
Manchuan

每天都是更好的自己

漫川的学习笔记

实现鼠标指针碰到图片和点击图片自动触发音频

2024-05-10 20 1

前言:

这个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
声明:本文由漫川发布,本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

发布评论


评论(1)

 MANCHUAN BLOG