0

当查看器悬停在不同的图像上时，我正在尝试播放多个音频文件，并且我不希望任何播放器/栏/功能显示在屏幕上，我只希望查看器将鼠标悬停在图像上，并且声音播放时，即使用户将光标移开，它也会完成播放。我所有的图像都被放置在 apDiv 标签中

$(function(){
    $('#apDiv3').hover(
    function() { $("killyou")[0].play(); },
    function() { $("killyou")[0].pause(); }
    )
});


<audio id="killyou" controls preload="auto">
    <source src="iwilkillyou.mp3" type="audio/mpeg"></source>
    <div id="apDiv3">
        <img src="explosion_by_dbszabo1-d3hmssu.png" width="175" height="5">
    </div>
</audio>

我在悬停时让它工作，它播放声音，但我不能将它用于多个图像，当鼠标移离图像时声音停止，这是我第一次使用 html 和 JQuery，任何人都可以帮助我有了这个？谢谢！

4

1 回答 1

0

（编辑：重新阅读您的问题）

也许：

$('.audio-source img').mouseover(function() {
    $('player source').attr('src', $(this).data('file'))
            .parent()[0].play();
});

使用 HTML：

<audio hidden id="player" controls preload="auto">
    <source src="default-audio.mp3" type="audio/mpeg"></source>
</audio>
<div class="audio-source">
    <img data-file="foo.mp3" src="image-1.png"/>
    <img data-file="bar.mp3" src="image-2.png"/>
    <img data-file="baz.mp3" src="image-3.png"/>
</div>

不过，我目前无法对此进行测试。

jQuery 函数.hover(on, off)绑定了两个函数，一个用于鼠标悬停，一个用于鼠标关闭。您只需要鼠标打开，即可使用该功能.mouseover(function)。jQuery 片段所做的是data-file从您悬停的图像中获取属性，并将其应用于标签的src属性。<source>然后我们抓取父节点，也就是<audio>标签，并调用play()DOM 节点。

于 2013-04-08T08:09:49.280 回答