Question

Javascript问题：当用户按下音频上的播放按钮时，有没有办法让图片移动或真正触发任何其他事件。

.hero {
	width: 600px;
	height: 600px;
}
.home.hero {
	background-image: url(http://i2.cdn.turner.com/cnnnext/dam/assets/111017060721-giant-panda-bamboo-story-top.jpg);
	background-size: cover;


}

	<a class="scroll" id="home"></a>
	<div class="home hero">
	<script>

  $(".home").animate({"top": "+=50px"}, 400);

     </script>
			<!--audio-->
			<!--set Volume -->
	<script type="text/javascript">
    function setVolume()
    {
        mySound=document.getElementById("sound");
        mySound.volume=0.5;
    }
    window.onload=setVolume;
    </script>
            <!--Volume end-->
		<div class="audio">
	    <audio id ="sound" controls>
        
        <source src="http://www.sousound.com/music/healing/healing_01.mp3" type="audio/mpeg" volume="0.5">
             Your browser does not support the audio element.
        </audio>
            
        <!--audio end-->
</div>

我希望图片向下移动一小段距离，当它到达底部时，回到顶部并继续这样做，只要音频正在播放。知道怎么做dis？

Answer 1

个人而言，我更倾向于“播放”事件而非“播放”（this所以答案给出了它们之间的差异），在你的小提琴演示中，我没有找到JQuery库，所以添加它并清理了代码，更新代码：

$(function(){

    var aud = $("#sound"),            
        move=$(".home");      

    move.animate({"top": "+=50px"}, 400);                        
    aud.on('play',function() { 
        move.animate({height:"300px"}, 400); 
    });
    aud.on('pause',function() { 
        if(aud[0].paused && (aud[0].currentTime === 0 || aud[0].currentTime === aud[0].duration) ) // checking if audio is finished, not just paused in between
            move.animate({height:"600px"}, 400);
    });
});

在音频播放上移动图像

1 个答案:

updated fiddle demo