我有一个图像，当用户将鼠标悬停在图像上时，该图像会更改为新图像。单击新图像后，就会播放音频文件。当用户鼠标移出图像时，图像将恢复为默认图像。问题是音频仍在播放。我不太擅长js，当用户鼠标移出时如何让音频暂停？非常感谢任何有用的反馈。下面是代码。<script type="text/javascript"> function setNewImg() { document.getElementById("about-me-img").src = "https://storage.googleapis.com/gd-wagtail-prod-assets/images/evolving_google_identity_2x.max-4000x2000.jpegquality-90.jpg"; } function setOldImg() { document.getElementById("about-me-img").src = "imgs/about-me.png"; } function pauseAudio() { document.getElementById("about-me-img").pause(); }</script><audio id="audio-play"> <source src="audio.mp3" type="audio/mpeg" /> </audio> <img id="about-me-img" onmouseover="setNewImg()" onmouseout="setOldImg()" onclick="document.getElementById('audio-play').play(); return false;" class="about-me-image about-me-img" src="imgs/about-me.png" alt="" width="200px;">javascriptjQueryhtmlCSS
3 回答
慕村225694
TA贡献1880条经验 获得超4个赞
拨打pauseAudio电话setOldImg，然后更改document.getElementById("about-me-img").pause();为document.getElementById("audio-play").pause();
function setOldImg() {
document.getElementById("about-me-img").src = "imgs/about-me.png";
pauseAudio();
}
function pauseAudio() {
document.getElementById("audio-play").pause();
}
开心每一天1111
TA贡献1836条经验 获得超13个赞
要解决此问题，您只需在元素上发生这种情况时调用pause()该元素即可。audiomouseoutimg
但是您应该注意，onX事件属性现在已经非常过时，不再是好的做法。您应该以不引人注目的方式附加您的事件。因此，请尝试以下操作：
document.addEventListener('DOMContentLoaded', () => {
let audio = document.querySelector('#audio-play');
let img = document.querySelector('#about-me-img');
audio.volume = 0.1; // just for testing, so it doesn't deafen you
img.addEventListener('mouseover', () => img.src = 'https://storage.googleapis.com/gd-wagtail-prod-assets/images/evolving_google_identity_2x.max-4000x2000.jpegquality-90.jpg');
img.addEventListener('mouseout', () => {
img.src = 'imgs/about-me.png';
audio.pause();
});
img.addEventListener('click', () => audio.play());
});
img {
display: block;
width: 200px;
height: 200px;
background-color: #C00;
}
<audio id="audio-play" controls>
<source src="http://www.sousound.com/music/healing/healing_01.mp3" type="audio/mpeg" />
</audio>
<img id="about-me-img" class="about-me-image about-me-img" src="imgs/about-me.png" alt="" />
- 3 回答
- 0 关注
- 51 浏览
添加回答
举报
0/150
提交
取消