Справочник функций

Ваш аккаунт

Войти через: 
Забыли пароль?
Регистрация
Информацию о новых материалах можно получать и без регистрации:

Почтовая рассылка

Подписчиков: 6312
Последний выпуск: 19.06.2015

Вопрос по JS красивостям

395
08 ноября 2014 года
SibBear
223 / / 27.07.2006
Задачка встала из существующих примеров реализовать след. менюшку:

Сначала все части (они будут div блоками) находятся в одном месте сайта. Кликаем на них


и вуаля, дивы плавно раздвигаются (вправо влево по диагонали, это нужно гибко) выстраивается красивое меню


вобщем наверное алгоритм должен быть следующим:
на старте все блоки на своих местах по css.
Он лоад скрипт сгребает все блоки в стартовую точку.
Кликом, плавно раскидавает все блоки на свои стартовые места в заданном порядке. Плааааавно....

Может есть на jquery решение готовое? Кто знает?
395
11 ноября 2014 года
SibBear
223 / / 27.07.2006
вот такой вариант наклипал, получилось интересно, но есть один недочет который мне лично режет глаза - это появление всех элементов одновременно.
Если кто посоветует как поправить буду благодарен
Код:
<head>

<style>
.slider_menu_div {
    width: 100px;
    height: 30px;
    font-weight: bold;
    color: #fff;
    background: #f00;
    position: absolute;
}

#start_m {
    left: 650px;
    top: 480px;
    cursor: pointer;
}

#m_div_1 {
    left: 150px;
    top: 80px;
}

#m_div_2 {
    left: 250px;
    top: 120px;
}

#m_div_3 {
    left: 350px;
    top: 160px;
}

#m_div_4 {
    left: 450px;
    top: 200px;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){  


    // сначала все собираем в кучу и прячем

    var start_pos_x = $('#start_m').css('left');   // в эту точку блоки будут собраны на старте
    var start_pos_y = $('#start_m').css('top');
    var slide_speed = 1500;    // скорость выстраивания блоков милисекунды
    var m_div_arr = [];

     $('.slider_menu_div').each(function(i){
        var curid = this.id.split('_')[2];

        var p_top = $('#m_div_'+curid).css('top');
        var p_left = $('#m_div_'+curid).css('left');

        m_div_arr[i] = [p_top,p_left];

        // собираем блоки в стартовую точку
        $('#m_div_'+curid).css({'top':start_pos_y, 'left':start_pos_x, 'visibility':'hidden'});
     });

    // возвращаем все блоки на свои места согласно купленных билетов

    $('.someclass').click(function () {                 //Ловим клик по классу someclass

        $('#start_m').css({'visibility':'hidden'});     //спрячем кликер

        $('.slider_menu_div').each(function(i){
            var curid = this.id.split('_')[2];

            $('#m_div_'+curid).css('visibility','visible');
                $('#m_div_'+curid).animate({'top':m_div_arr[i][0], 'left':m_div_arr[i][1]}, slide_speed);  
           
        });
        return false;
    });

});
</script>

</head>

<body>

<div id="start_m" class="slider_menu_div someclass">Click Me!</div>

<div id="m_div_1" class="slider_menu_div">1 menu item</div>
<div id="m_div_2" class="slider_menu_div">2 menu item</div>
<div id="m_div_3" class="slider_menu_div">3 menu item</div>
<div id="m_div_4" class="slider_menu_div">4 menu item</div>

</body>
</html>

Знаете кого-то, кто может ответить? Поделитесь с ним ссылкой.

Ваш ответ

Реклама на сайте | Обмен ссылками | Ссылки | Экспорт (RSS) | Контакты
Добавить статью | Добавить исходник | Добавить хостинг-провайдера | Добавить сайт в каталог