如何为从中心点移动到屏幕外的 DIV 设置动画？答案

【问题标题】：How can I animate DIVs moving from a central point to off-screen?如何为从中心点移动到屏幕外的 DIV 设置动画？
【发布时间】：2011-03-02 18:38:58
【问题描述】：

是否可以让 div 位于中心点周围，然后悬停在鼠标离开时让它们离开屏幕并返回？

这是什么布局：

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

看起来，这个想法是让绿色的“叶子”拂去以显示树枝和菜单。用 JavaScript 和 PHP 能做到吗？

【问题讨论】：

这不应该被标记为php，这是一个与您的服务器语言无关的客户端问题。
用 javascript 替换了 php 标签，因为解决方案很可能涉及到它（使用或不使用 jQuery）

标签： javascript animation css html

【解决方案1】：

您将需要结合一些 jQuery 功能。

动画功能位于：http://api.jquery.com/animate/
鼠标悬停功能：http://api.jquery.com/mouseover/
鼠标移出功能：http://api.jquery.com/mouseout/

在检测到鼠标悬停的地方具有“虚拟 div”，使用动画将其 ID 的真实 div 移出视野，并通过 mouseout 将其带回来

我觉得这很有趣，所以为自己编写了代码……我按照以下方式完成了：

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

【讨论】：

【解决方案2】：

我能说服你不要这样设计网站吗？

我想不是，所以答案是使用 jQuery。 Here 是 jQuery 动画参考，你需要仔细研究。

【讨论】：