Question

因为有一些漂亮的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>

Answer 1

<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鼠标悬停功能按预期工作 - 设置鼠标悬停事件 #img

上的监听器

4. .play（）播放声音

5 .currentTime = 0将声音重新排入开头以供下次使用

在jQuery中鼠标悬停音频

1 个答案: