因此，由于一些漂亮的jQuery代码，我的页面上的图片无法点击。而且我有一个自动播放的剪辑，但是每当有人将鼠标悬停在运动图像上时，我都希望发出拂拂声。
<!DOCTYPE html>
<html>
<head>
<title>Calculations</title>
<link href="style" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<div class="top">
<audio controls autoplay>
<source src="trombone2.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
<p>
Our calculations show that your monitor is shitty, we advise you wipe the crap off your monitor preventing you from seeing anything that isn't blindingly bright. If that doesn't seem to make a difference click on the turd to run the adjustment algorithm.
</p>
</div>
<a href="calc.html"> <img src="poop.png" width="100" height="100" alt="Grey Square" id="img" />
<script>
jQuery(function($) {
$('#img').mouseover(function() {
var dWidth = $(document).width() - 100, // 100 = image width
dHeight = $(document).height() - 100, // 100 = image height
nextX = Math.floor(Math.random() * dWidth),
nextY = Math.floor(Math.random() * dHeight);
$(this).animate({ left: nextX + 'px', top: nextY + 'px' });
});
});
</script>
</body>
</html>
最佳答案
<script>
var snd1 = new Audio("swish.mp3"); //1
$(document).ready(function(){ //2
$("#img").mouseover(function(){ //3
var dWidth = $(document).width() - 100, // 100 = image width
dHeight = $(document).height() - 100, // 100 = image height
nextX = Math.floor(Math.random() * dWidth),
nextY = Math.floor(Math.random() * dHeight);
$(this).animate({ left: nextX + 'px', top: nextY + 'px' });
snd1.play(); //4
snd1.currentTime=0; //5
});
});
</script>
1第一行创建一个JS音频对象
2 document.ready部分等待创建DOM来设置您的
事件监听器
3 mouseover功能按预期工作-设置mouseover事件
#img上的侦听器
4 .play()播放声音
5 .currentTime = 0将声音重新排到开头以备下次使用
关于jquery - jQuery中的鼠标悬停音频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23485180/