html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

Создаем меню с уменьшенными изображениями с использованием jQuery

В этом уроке мы создадим фиксированное меню с прокручиваемыми уменьшенными изображениями.  Основная задача — создать меню, привязанное к низу страницы, и позволить вертикально расположенному набору уменьшенных изображений появляться, когда указатель мыши наведен на элемент меню. Уменьшенные изображения можно прокрутить, двигая мышь вверх-вниз, что создаст интересный эффект. Мы добавим свойства CSS3 для оригинальности.

 

 


 Демо – Скачать исходный код

Наш jQuery код будет основан на вертикально прокручиваемом меню от Andrew Valums.

Изображения, использованные в примере, взяты из невероятной коллекции фотографий kk+ с сайта flickr.

Итак, давайте начнем!

Разметка

Html код здесь довольно прямолинейный. Мы будем использовать ненумерованный список с элементом ссылки и блоком, который содержит меню с уменьшенными изображениями.

<ul id="menu">

    <li>

        <a href="#">Brand 1</a>

        <div>

            <div>

                <a href=""><img src="images/1.jpg" alt=""/></a>

                <a href=""><img src="images/2.jpg" alt=""/></a>

                ...

            </div>

        </div>

    </li>

    ...
</ul>

Здесь показан только отрывок, так как по нему уже видно, как создать структуру.

Давайте рассмотрим стили.

CSS

Сначала мы настроим так, чтобы переполнение тела документа не приводило к появлению полос прокрутки:

body{

    overflow:hidden;
}

Это не является необходимым для того, чтобы все работало, но так будет лучше выглядеть, и если на странице не очень много данных, то это не создаст проблем.

/* Стиль навигации */

ul.menu{

    list-style:none;

    font-family: "Trebuchet MS", Arial, sans-serif;;

    font-size: 15px;

    font-style: normal;

    font-weight: normal;

    text-transform:uppercase;

    letter-spacing: normal;

    line-height: 1.45em;

    position: fixed;

    bottom:0px;

    left:0px;

    width:700px;

    height:100%;
}

Если Вы хотите, чтобы страница прокручивалась, убедитесь, что вы сделали меню фиксированным, чтобы оно прилипало к низу страницы. Список элементов и ссылки будут иметь такой стиль:

ul.menu li{

    float:left;

    position:relative;

    height:100%;

    width:130px;

}

ul.menu li > a{

    position:absolute;

    bottom:0px;

    left:0px;

    width:130px;

    height:40px;

    text-align:center;

    line-height:40px;

    color:#ddd;

    background-color:#291A2F;

    letter-spacing:1px;

    cursor:pointer;

    text-decoration:none;

    text-shadow:0px 0px 1px #fff;

    -moz-box-shadow:-1px 0px 5px #000;

    -webkit-box-shadow:-1px 0px 5px #000;

    box-shadow:-1px 0px 5px #000;

    opacity:0.9;

    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
}

Нам необязательно использовать ссылочный элемент, мы можем использовать тег span или что-то другое. Но в этом примере мы используем традиционный метод.

С помощью белой тени текста за белым текстом мы получим легкое размытие шрифта, которое дает эффект сглаживания, особенно в браузере Chrome. Последнее свойство — это фильтр прозрачности для браузера Internet Explorer. Будьте осторожны, используя этот фильтр для изображений в формате png, у которых есть прозрачные и полупрозрачные части: браузер Internet Explorer заполнит их черным.

Стиль для блока, содержащего уменьшенные изображения, будет таким:

/* Стиль прокручивающихся уменьшенных изображений */

div.sc_menu_wrapper {

    position: absolute;

    top:0px;

    width:150px;

    overflow: hidden;

    bottom:0px;

    left:0px;

    visibility:hidden;

}

div.sc_menu {

    width:130px;

    visibility:hidden;
}

Почему мы используем здесь свойство visibility:hidden? У нас есть две причины: первая — мы хотим, чтобы уменьшенные изображения появлялись так, как если бы мы располагали их от низа до верха, так что мы уже разместили эти элементы здесь и затем просто сделали их видимыми. Посмотрите, как это сделано с помощью Javascript. Со свойством display:none элемент не занимает места на странице, но со свойством visibility:hidden место будет занято, а элемент просто не будет виден.

Мы задаем это свойство блоку, чтобы функция прокручивания в jQuery получила высоту элементов. Если наши элементы не показаны, то получение высоты невозможно. Свойство видимости решает эту проблему.

Стиль ссылок и уменьшенных изображений такой:

.sc_menu a {

    display: block;

    background-color:#22002F;

    color: #fff;

    text-align:center;

    -moz-box-shadow:3px -3px 3px #3B0F4F;

    box-shadow:3px -3px 3px #3B0F4F;

    -webkit-box-shadow:3px -3px 3px #3B0F4F;

}

.sc_menu img {

    display: block;

    border: none;

    opacity:0.3;

    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
}

Это были стили, а теперь давайте добавим магию!

JavaScript

Основная задача — показать меню с уменьшенными изображениями, когда мы наводим указатель мыши на основные элементы навигации. Мы показываем уменьшенные изображения в порядке расположения, один за другим, с задержкой.

Функция buildThumbs позволит нам прокручивать уменьшенные изображения без полосы прокрутки, двигая мышь вертикально.

Функция inactiveMargin позволит нам добраться до самого верхнего и до самого нижнего уменьшенного изображения так, что мы сможем увидеть все изображение целиком, а не обрезанным.

Изначально мы хотим начать снизу, так что мы прокручиваем вниз.

Когда мы выходим из главного списка элементов, мы возвращаем все к нормальному состоянию, прячем все снова.

Когда мы наведем указатель мыши на уменьшенное изображение, прозрачность изменится.

$(function(){

    /* Функция, которая делает меню с уменьшенными изображениями прокручиваемым */

    function buildThumbs($elem){

        var $wrapper        = $elem.next();

        var $menu           = $wrapper.find('.sc_menu');

        var inactiveMargin  = 150;

        /* Сдвинуть прокрутку вниз к началу - сдвинуть на высоту меню */

        $wrapper.scrollTop($menu.outerHeight());

        /* Когда указатель мыши перемещается вниз или вверх, блок перемещается-прокручивается вниз или вверх */

        $wrapper.bind('mousemove',function(e){

            var wrapperHeight   = $wrapper.height();

            var menuHeight  = $menu.outerHeight() + 2 * inactiveMargin;

            var top     = (e.pageY - $wrapper.offset().top) * (menuHeight - wrapperHeight) / wrapperHeight - inactiveMargin;

            $wrapper.scrollTop(top+10);

        });

    }

    var stacktime;

    $('#menu li > a').bind('mouseover',function () {

        var $this = $(this);

        buildThumbs($this);

        var pos =   $this.next().find('a').size();

        var f   =   function(){

            if(pos==0) clearTimeout(stacktime);

            $this.next()

                 .find('a:nth-child('+pos+')')

                 .css('visibility','visible');

            --pos;

        };

        /* Каждое уменьшенное изображение будет появляться с задержкой */

        stacktime = setInterval(f , 50);

    });

    /* После того, как указатель мыши вышел за пределы меню, весь список прокручиваемой области прячется */

    $('#menu li').bind('mouseleave',function () {

        var $this = $(this);

        clearTimeout(stacktime);

        $this.find('.sc_menu')

             .css('visibility','hidden')

             .find('a')

             .css('visibility','hidden');

        $this.find('.sc_menu_wrapper')

             .css('visibility','hidden');

    });

    /* Когда указатель мыши наведен на уменьшенное изображение, изменить его прозрачность */

    $('.sc_menu a').hover(

        function () {

            var $this = $(this);

            $this.find('img')

            .stop()

            .animate({'opacity':'1.0'},400);

        },

        function () {

            var $this = $(this);

            $this.find('img')

            .stop()

            .animate({'opacity':'0.3'},400);

        }

    );
});

Это все! Наслаждайтесь! 

Демо - Скачать исходный код

 

Автор урока Mary Lou
Перевод — Дежурка

Смотрите также:

Читать дальше
Twitter
Одноклассники
Мой Мир

материал с dejurka.ru

23
    +5 surfers

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • dejurka-magazine
          • домен dejurka.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции