第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

如何在圖像更改時(shí)暫停音頻 onmouseout

如何在圖像更改時(shí)暫停音頻 onmouseout

長(zhǎng)風(fēng)秋雁 2023-10-24 21:41:44
我有一個(gè)圖像，當(dāng)用戶將鼠標(biāo)懸停在圖像上時(shí)，該圖像會(huì)更改為新圖像。單擊新圖像后，就會(huì)播放音頻文件。當(dāng)用戶鼠標(biāo)移出圖像時(shí)，圖像將恢復(fù)為默認(rèn)圖像。問題是音頻仍在播放。我不太擅長(zhǎng)js，當(dāng)用戶鼠標(biāo)移出時(shí)如何讓音頻暫停？非常感謝任何有用的反饋。下面是代碼。<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貢獻(xiàn)1880條經(jīng)驗(yàn) 獲得超4個(gè)贊

撥打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();

}


查看完整回答
反對(duì) 回復(fù) 2023-10-24
?
HUWWW

TA貢獻(xiàn)1874條經(jīng)驗(yàn) 獲得超12個(gè)贊

嘗試將 paiseAudio() 函數(shù)中的“about-me-img”更改為“audio-play”。



查看完整回答
反對(duì) 回復(fù) 2023-10-24
?
開心每一天1111

TA貢獻(xiàn)1836條經(jīng)驗(yàn) 獲得超13個(gè)贊

要解決此問題，您只需在元素上發(fā)生這種情況時(shí)調(diào)用pause()該元素即可。audiomouseoutimg


但是您應(yīng)該注意，onX事件屬性現(xiàn)在已經(jīng)非常過時(shí)，不再是好的做法。您應(yīng)該以不引人注目的方式附加您的事件。因此，請(qǐng)嘗試以下操作：


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="" />



查看完整回答
反對(duì) 回復(fù) 2023-10-24
  • 3 回答
  • 0 關(guān)注
  • 139 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)