如何为从中心点移动到离屏的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制作动画？

回答

相关问题