Comment puis-je animer les DIV se déplaçant d'un point central à l'extérieur de l'écran?

Question

Est-il possible d'avoir des divs situés autour d'un point central et ensuite en vol stationnaire pour qu'ils se déplacent d'un écran à l'autre et reviennent quand la souris est partie?

Ce que la mise en page:

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

est Ressemblant, l'idée est pour les « feuilles vertes » pour montrer au large fouet les branches et les menus. Serait-ce possible avec JavaScript et PHP?

Answer 1

Vous allez devoir combiner quelques fonctions jQuery.

La fonction d'animation à: http://api.jquery.com/animate/
La souris sur fonction: http://api.jquery.com/mouseover/
La souris désactivante: http://api.jquery.com/mouseout/

Have « divs factices » où la souris sur est détecté vrai mouvement div de leur carte d'identité hors de la vue en utilisant l'animer, et de le ramener avec mouseout

J'ai trouvé cela intéressant si codé pour moi-même ... Je l'ai fait comme ci-dessous:

<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> 

Answer 2

Est-ce que je pourrais vous convaincre de ne pas concevoir un site de cette façon?

Je suppose que non, donc la réponse est d'utiliser jQuery. Here est la référence jQuery pour l'animation, que vous devrez étudier attentivement.