Навигация с эффектом скольжения при смене категорий

На странице с выбором продуктов компании Apple используется интересный эффект при смене категории. Если посмотреть исходный код страницы, то можно обнаружить, что Apple использует prototype.js - популярную до появления jQuery библиотеку JavaScript. В данном уроке мы воспроизведем эффект, применяя плагин jQuery Easing.

HTML

Разметка HTML похожа на слайдшоу с использованием свойства CSS overflow, синхронизацией контейнера со ссылками на продукты и навигацией. Так что все может легко управляться через jQuery.

    <div class="container">
        <div id="container_wide">
            <div class="product_container" id="product_browser">
                <a href="#"><img src="/img/browser/Chrome.png"></a>
                <a href="#"><img src="/img/browser/Safari.png"></a>
                <a href="#"><img src="/img/browser/Firefox.png"></a>
                <a href="#"><img src="/img/browser/IE.png"></a>
                <a href="#"><img src="/img/browser/Maxthon.png"></a>
                <a href="#"><img src="/img/browser/Opera.png"></a>
            </div>
            <div class="product_container" id="product_apple">
                <a href="#"><img src="/img/apple/iMac.png"></a>
                <a href="#"><img src="/img/apple/MacBook.png"></a>
                <a href="#"><img src="/img/apple/MacMini.png"></a>
                <a href="#"><img src="/img/apple/iPhone.png"></a>
                <a href="#"><img src="/img/apple/Macpro.png"></a>
            </div>
            <div class="product_container" id="product_construction">
                <a href="#"><img src="/img/construction/01.png"></a>
                <a href="#"><img src="/img/construction/02.png"></a>
                <a href="#"><img src="/img/construction/03.png"></a>
                <a href="#"><img src="/img/construction/04.png"></a>
            </div>
             <div class="product_container" id="product_cake">
                <a href="#"><img src="/img/cake/01.png"></a>
                <a href="#"><img src="/img/cake/02.png"></a>
                <a href="#"><img src="/img/cake/03.png"></a>
                <a href="#"><img src="/img/cake/04.png"></a>
                <a href="#"><img src="/img/cake/05.png"></a>
                <a href="#"><img src="/img/cake/06.png"></a>
            </div>
            <div style="clear:both"></div>
        </div>
    </div>
    <div class="nav">
        <a href="#" class="product_nav" id="nav_browser">Браузер</a>
        <a href="#" class="product_nav" id="nav_apple">Apple</a>
        <a href="#" class="product_nav" id="nav_construction">Стройка</a>
        <a href="#" class="product_nav" id="nav_cake">Пироги</a>
    </div>

 

CSS

* {
    font-family: Arial, "Free Sans";
}
.container {
    border: 5px solid #0099cc;
    width: 700px;
    overflow: hidden;
    margin: 0 auto;
    margin-top: 50px;
    padding: 10px 0;
    -webkit-border-radius: .3em .3em 0 0;
    -moz-border-radius: .3em .3em 0 0;
    border-radius: .3em .3em 0 0;
}
#container_wide {
    width: 2800px;position: relative;
}
.product_container {
    text-align: center;
    width: 700px;
    float: left;
    position: relative;
}
.product_container a {
    margin: 0 12px;
    position: relative;
}
.nav {
    width: 700px;
    background: #0099cc;
    margin: 0 auto;
    text-align: center;
    border: 5px solid #0099cc;
    border-bottom-width: 10px;
    -webkit-border-radius: 0 0 .3em .3em;
    -moz-border-radius: 0 0 .3em .3em;
    border-radius: 0 0 .3em .3em;
}
.nav a {
    color: #fff;
    font-size: 12px;
    letter-spacing: 1px;
    margin-right: 10px;
    font-weight: bold;
    text-decoration: none;
}
.nav a:hover {
    color: #e3e3e3;
}


jQuery

jQuery перемещает каждый пункт один за другим из определенного контейнера продуктов с задержкой.

 

    $(document).ready(function() {
        var displayed = "product_browser";
        var cindex = 0; // Текущий индекс (выводимый раздел)

        function loopMoveLeft(el, move) {
            if (el.length == 1) {
                setTimeout(function() {
                    el.animate({ left: move }, {
                        duration: 'slow',
                        easing: 'easeOutBounce'
                    });
                    loopMoveLeft(el.next(), move);
                }, 100);
            }
        }

        function loopMoveRight(el, move) {
            if (el.length == 1) {
                setTimeout(function() {
                    el.animate({ left: move }, {
                        duration: 'slow',
                        easing: 'easeOutBounce'
                    });
                    loopMoveRight(el.prev(), move);
                }, 100);
            }
        }

        function slideItem(obj_el) {
            var product = $(obj_el).attr("id").replace("nav_", "");
            var contid = 'product_' + product;

            // Текущий отображаемый элемент
            var elFirst = $("#"+displayed+" a:first-child");
            var elLast = $("#"+displayed+" a:last-child");
            var total_el = $("#"+displayed).children().length;

            var index = $(obj_el).index();

            // Новый элемент для вывода
            var el_f = $("#"+contid+" a:first-child");
            var el_l = $("#"+contid+" a:last-child");
            var total_new = $("#"+contid).children().length;

            var movement = -700 * index;

            if (cindex > index) {
                loopMoveRight(elLast, movement); 
                setTimeout(function() {
                    loopMoveRight(el_l, movement) 
                }, (total_el + 1) * 100);
            } else if (cindex < index) {
                loopMoveLeft(elFirst, movement); 
                setTimeout(function() {
                    loopMoveLeft(el_f, movement)
                }, (total_el + 1) * 100);
            } 

            cindex = index;
            displayed = contid;

            return (total_el + 5 + total_new) * 100;
        }

        var timeout;

        $(".product_nav").click(function() {
            $(".product_nav").unbind('click');
            timeout = slideItem(this);

            // Защита от дурака
            setTimeout(function() {
                $(".product_nav").bind('click', function() {
                    timeout = slideItem(this);
                });
            }, timeout);
        });
    });

Для задержки используется функция setTimeout. Также реализована защита от дурака, который будет бесцельно щелкать по разделам кнопкой мыши, в которой также используется setTimeout.

 


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/Q4AZ3JyoK5A/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Навигация с эффектом скольжения при смене категорий | | 2012-06-19 12:03:30 | | Статьи Web-мастеру | | На странице с выбором продуктов компании Apple используется интересный эффект при смене категории. Если посмотреть исходный код страницы, то можно обнаружить, что Apple использует prototype.js - | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: