我正在尝试实现它，因此当我将鼠标悬停在脉冲图像上方时(我知道它看起来像癌)，我希望它播放声音文件，当我从堆叠图像中移开鼠标时，声音文件就会停止。
我遇到的另一件事是使图像居中，无论如何它们似乎都将自己定位在 Angular 落里，我该如何解决这个问题？ 当前代码:似乎无法理解如何做到这一点。
<html>
<head>
<title> fagdag 26.04.2016 helårs </title>
<style>
#banner {
vertical-align: middle
}
.pulsate {
-webkit-animation: pulsate 3s ease-out;
-webkit-animation-iteration-count: infinite;
opacity: 0.5;
}
@-webkit-keyframes pulsate {
0% {
opacity: 0.5;
}
50% {
opacity: 1.0;
}
100% {
opacity: 0.5;
}
}
</style>
</head>
<body>
<div id="banner">
<img src="http://i.imgur.com/SrnpgpD.jpg" style="z-index: 0; position: absolute" align="middle"">
<img class="pulsate" src="http://i.imgur.com/t2Pil1a.png" style="z-index: 1; position: absolute" align="middle""">
</div>
<p onmouseover="PlaySound('mySound')"
onmouseout="StopSound('mySound')">Hover Over Me To Play</p>
<br><br>
<audio id='mySound' src='http://upload.wikimedia.org/wikipedia/commons/6/6f/Cello_Live_Performance_John_Michel_Tchaikovsky_Violin_Concerto_3rd_MVT_applaused_cut.ogg'/>
function PlaySound(soundobj) {
var thissound=document.getElementById(soundobj);
thissound.play();
}
function StopSound(soundobj) {
var thissound=document.getElementById(soundobj);
thissound.pause();
thissound.currentTime = 0;
}
</body>
</html>
最佳答案
您需要首先添加脚本标签。
要居中对齐文本，您需要使用text-align:center。另外，您应该阅读 position:absolute，因为这意味着 p 标签隐藏在图像后面。
当您将鼠标悬停在声音将播放的图像上时，以下内容将起作用。
<html>
<head>
<title>fagdag 26.04.2016 helårs</title>
</head>
<body>
<div style="text-align:center;" id="banner">
<img src="http://i.imgur.com/SrnpgpD.jpg" style="z-index: 0;>
<img src="http://i.imgur.com/t2Pil1a.png" style="z-index: 1; position: relative; text-align:center" class="pulsate">
</div>
<p onmouseover="PlaySound( 'mySound') " onmouseout="StopSound( 'mySound') ">Hover Over Me To Play</p>
<audio id='mySound' src='http://upload.wikimedia.org/wikipedia/commons/6/6f/Cello_Live_Performance_John_Michel_Tchaikovsky_Violin_Concerto_3rd_MVT_applaused_cut.ogg' />
<script type="text/javascript ">
function PlaySound(soundobj) {
var thissound = document.getElementById(soundobj);
thissound.play();
}
function StopSound(soundobj) {
var thissound = document.getElementById(soundobj);
thissound.pause();
thissound.currentTime = 0;
}
</script>
</body>
</html>关于javascript - 在悬停图像上播放声音，悬停在图像上时停止，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36858877/