上一篇: Element.update不是函数[Rails 3... 下一篇:jQuery和跨域POST请求

jquery – 鼠标悬停时的音频

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery – 鼠标悬停时的音频，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

它部分工作,但我如何让下面的多个音频文件：

<!DOCTYPE HTML>
    <html>
    <body>

    <script language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

    <script type="text/javascript">
    $(function(){
        var birdhover     = $('.birds');
            var birdaudio = birdhover.find('audio')[0];

        birdhover.hover(function(){
           birdaudio.play();
        },function(){
           birdaudio.stop();
        });
    });
    </script>

    <div class="birds" style="width:30px;height:30px;BACkground-image:url(image1.gif');cursor:pointer;">
       <audio src="sound1.ogg" preload="auto"></audio>
    </div> 

    <div class="birds" style="width:30px;height:30px;BACkground-image:url('/home/imran/Desktop/images/vowel_short_2.gif');cursor:pointer;">
(image2.gif');cursor:pointer;">
       <audio src="sound2.ogg" preload="auto"></audio>
    </div> 

    </body>
    </html>

两个图像都播放相同的声音.

解决方法

如果您不介意使用HTML5：

HTML

<div class="birds">
   <audio src="/sounds/bird.mp3" preload="auto"></audio>
</div>

使用Javascript

$(function(){
    var birdhover     = $('.birds');
        var birdaudio = birdhover.find('audio')[0];

    birdhover.hover(function(){
       birdaudio.play();
    },function(){
       birdaudio.stop();
    });
});