我有一個圖像，當用戶將鼠標懸停在圖像上時，該圖像會更改為新圖像。單擊新圖像后，就會播放音頻文件。當用戶鼠標移出圖像時，圖像將恢復為默認圖像。問題是音頻仍在播放。我不太擅長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 關注
- 142 瀏覽
添加回答
舉報
0/150
提交
取消