JavaScript 圖片從左下飛至右上動畫：jQuery animate 實現

效果

火箭圖片點擊後從左下角飛向右上角並消失。

核心代碼

<style>
#rocket { position: absolute; left: 0; bottom: 0; width: 100px; height: 100px; }
</style>
<div id="rocket"><img src="rocket.png"></div>

<script>
$(function () {
    var $rocket = $('#rocket');
    var cw = $(window).width(), ch = $(window).height();
    var rw = $rocket.width(), rh = $rocket.height();
    $rocket.animate({
        left: cw - rw,
        top: 0  // 右上角 top=0
    }, 2000, function () {
        $rocket.hide();
    });
});
</script>

關鍵點

• position: absolute 使圖片脫離文檔流，可自由定位。
• animate 同時改變 left 和 top 實現斜線軌跡。
• 回調函數中 hide() 移除元素。