Как я могу анимировать DIV, перемещающиеся из центральной точки в другую?

Question

Можно ли расположить элементы div вокруг центральной точки, а затем при наведении на них, чтобы они отошли от экрана и вернулись, когда мышь исчезла?

Вот что такое макет:

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

выглядит как идеядля зеленых "листьев", чтобы смахнуть, чтобы показать ветви и меню.Возможно ли это с помощью JavaScript и PHP?

Answer 1

Есть ли шанс убедить вас не создавать сайт таким образом?

Полагаю, нет, поэтому ответом будет использование jQuery. Здесь - это справочник по jQuery для анимации, который вам необходимо внимательно изучить.

Answer 2

Вам нужно будет объединить несколько функций jQuery.

Функция анимации: http://api.jquery.com/animate/
Функция наведения мыши: http://api.jquery.com/mouseover/
Функция выхода из мыши: http://api.jquery.com/mouseout/

Имейте "фиктивные div", где обнаружена наведенная мышка, которые перемещают реальный div их идентификатора вне поля зрения с помощью animate и возвращают его с помощью 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>