如何爲從中心點移動到離屏的DIV製作動畫？

是否有可能讓div位於中心點附近，然後將鼠標懸停在屏幕上並在鼠標消失時返回？如何爲從中心點移動到離屏的DIV製作動畫？

這是什麼佈局：

layout http://pena-alcantara.com/aramael/wp-content/uploads/2010/04/Paper-Browser.8.5x11.Horizontal3.jpg

正在尋找類似的想法是綠色的「葉子」拂滅來顯示樹枝和菜單。 JavaScript和PHP可以做到這一點嗎？

來源

2010-06-11 Aramael Pena-Alcantara

這不應該被標記'php'，這是一個與您的服務器語言無關的客戶端問題。 – 2010-06-11 18:47:51

用javascript取代了php標記，因爲解決方案很可能涉及到（帶或不帶jQuery） – akauppi 2010-07-19 07:23:17

你將需要結合幾個jQuery功能。

在動畫功能：http://api.jquery.com/animate/
將鼠標移到功能：http://api.jquery.com/mouseover/
鼠標輸出功能：http://api.jquery.com/mouseout/

有「假申報單」，其中鼠標在檢測到移動他們的ID真實DIV拿出來看使用它的動畫，並用鼠標移出

把它帶回來，我發現這個有趣所以編碼它自己...我做到了，如下：

<style type="text/css"> 
body { 
    overflow:hidden; 
} 
.leaf { 
    position:relative; 
    background-color:#0F0; 
    height: 100px; 
    width: 100px; 
} 
.branch { 
    display:inline-block; 
    background-color:#F00; 
    height: 100px; 
    width: 100px; 
} 
</style> 
<script type="text/javascript"> 
$(function(){ 
    var w = $(document).width(); 
    var h = $(document).height(); 
    var r = 250; 
    $(".branch").hover(function() { 
        var rand = Math.random(); 
        var x,y; 
        if(rand<0.25) { 
         x = w; 
         y = h*Math.random(); 
        } else if(rand<0.5) { 
         x = -w; 
         y = h*Math.random(); 
        } else if(rand<0.75) { 
         x = w*Math.random(); 
         y = h; 
        } else { 
         x = w*Math.random(); 
         y = -h; 
        } 
        $(this).children().animate({left: x, top: y});   
       }, function() { 
        $(this).children().animate({left: '0', top: '0'}); 
       }) 
}); 
</script> 
<div class="wrap"> 
    <div class="branch"><div class="leaf"></div></div><!-- etc --> 
</div>

來源

2010-06-11 18:17:24

我可以說服你不要這樣設計網站嗎？

我想不是，所以答案就是使用jQuery。 Here是動畫的jQuery參考，您需要仔細研究。

來源

2010-06-11 18:10:06 Entendu

如何爲從中心點移動到離屏的DIV製作動畫？

回答

相關問題