Question

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

这就是布局：

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

看起来像是，想法是绿色的“叶子”拂去显示分支和菜单。这可以用JavaScript和PHP吗？

Answer 1

我有没有机会说服你不要这样设计网站？

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

Answer 2

您需要结合一些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>

如何动画DIV从中心点移动到屏幕外？

2 个答案: