0

我正在使用我有限的 javascript 技能来尝试一个可以循环播放小动画和声音剪辑的脚本。这是我到目前为止所得到的：

<script>
function PulseArea() {
    $('.area-pulse').stop();
    $('.area-pulse').css({ width: 38, height: 38, top: 217, left: 77, opacity: 1 });
    $('.area-pulse').animate({ width: 700, height: 700, top: -114, left: -254, opacity:0 }, 4000, null, function () {  setTimeout("PulseArea()", 400); });

}
$(function() {

    var sample = new Audio("audio/water-droplet-1.wav");

    function playSample() {

    sample.pause();
    sample.currentTime = 0;
    sample.play();
}
})
$(document).ready(function() {
for (i=0;i<=5;i++)
{
PulseArea();
playSample();
}    
})
</script>

相关CSS：

.area-pulse
        {
            display:block;
            width:38px;
            height:38px;
            position:absolute;
            top:217px;
            left:77px;
            background-color:transparent;
            zoom: 1;


        }
            .area-pulse img
            {
                opacity:1;
                width:100%;
                height:100%;
                display:inline-block;   
                filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/area_pulse.png', sizingMethod='scale');
                background-color:transparent;
            }

相关HTML：

<div style=" width:954px; height:600px; position:absolute;" class="area-pulse"><img src="img/area_pulse.png" /></div>

问题是声音。动画播放良好。有什么建议么？我搜索了 StackOverflow，但找不到这样的东西。

感谢您的关注！

4

2 回答 2

1

您的函数playSample是在匿名函数范围内定义的，因此不能从document.ready范围内调用它。如果将所有内容移到同一范围内，它将正常工作：

$(document.ready(function () {
    function PulseArea() {
        $('.area-pulse').stop();
        $('.area-pulse').css({ width: 38, height: 38, top: 217, left: 77, opacity: 1 });
        $('.area-pulse').animate({ width: 700, height: 700, top: -114, left: -254, opacity:0 }, 4000, null, function () {  setTimeout("PulseArea()", 400); });
    }

    var sample = new Audio("audio/water-droplet-1.wav");

    function playSample() {
        sample.pause();
        sample.currentTime = 0;
        sample.play();
    }

    for (i=0;i<=5;i++) {
        PulseArea();
        playSample();
    }    
});
于 2012-09-11T17:15:33.370 回答
0

我不知道我的问题中的脚本有什么问题，但我通过重写它解决了它。我希望其他人可以因此得到帮助。:)

<script>

function PulseArea() {
var audioElement = document.createElement('audio');   
    audioElement.setAttribute('src', 'audio/waterdrop.mp3');
    audioElement.play();
$('.area-pulse').stop();
$('.area-pulse').css({ width: 16, height: 16, top: 227, left: 89, opacity: 1 });
$('.area-pulse').animate({ width: 700, height: 700, top: -114, left: -254, opacity:0 }, 4000, null, function () {  setTimeout("PulseArea()", 400); });

}
$(document).ready(function() {

for (i=0;i<=5;i++)
{
PulseArea();
} 

})

</script>
于 2012-09-14T13:24:24.647 回答