Полезное в сети

Всегда в теме

Статистика


Яндекс.Метрика


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Рекомендуем



Главная » 2013 » Ноябрь » 11 » ДОВОЛЬНО ПРОСТОЙ СЛАЙДЕР-МЕНЮ С JQUERY И CSS3


12:23
ДОВОЛЬНО ПРОСТОЙ СЛАЙДЕР-МЕНЮ С JQUERY И CSS3

ДОВОЛЬНО ПРОСТОЙ СЛАЙДЕР-МЕНЮ С JQUERY И CSS3

 


Сегодня мы создадим слайдер с JQuery и CSS3. Идея состоит в том, чтобы изображение менялось в соответствии с пунктами нашего меню. 
Итак, давайте начнем с разметки.


ПОСМОТРЕТЬ ДЕМО                    СКАЧАТЬ ИСТОЧНИКА


 РАЗМЕТКА

HTML состоит из основного DIV называется ротатор и неупорядоченного списка, где мы определим элемент меню, заголовок и описание элемента. Вот разметки список элементов и пустой элемент списка, который мы будем использовать для заполнения содержанием:

<div class="rotator">

    <ul id="rotmenu">

        <li>

            <a href="rot1">Portfolio</a>

            <div style="display:none;">

                <div class="info_image">1.jpg</div>

                <div class="info_heading">Our Works</div>

                <div class="info_description">

     At vero eos et accusamus et iusto odio

    dignissimos ducimus qui blanditiis praesentium

    voluptatum deleniti atque corrupti quos dolores et

    quas molestias excepturi sint occaecati cupiditate

    non provident...

                    <a href="#" class="more">Read more</a>

                </div>

            </div>

        </li>

        <li>

            <a href="rot2">Services</a>

            <div style="display:none;">

                <div class="info_image">2.jpg</div>

                <div class="info_heading">We serve</div>

                <div class="info_description">

     At vero eos et accusamus et iusto odio

    dignissimos ducimus qui blanditiis praesentium

    voluptatum deleniti atque corrupti quos dolores et

    quas molestias excepturi sint occaecati cupiditate

    non provident...

                    <a href="#" class="more">Read more</a>

                </div>

            </div>

        </li>

        ...

    </ul>

    <div id="rot1">

        <img src="" width="800" height="300" class="bg" alt=""/>

        <div class="heading">

            <h1></h1>

        </div>

        <div class="description">

            <p></p>

        </div>

    </div>

</div>

 

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

CSS

Основной DIV ротатор будет иметь следующий стиль:

.rotator{

    background-color:#222;

    width:800px;

    height:300px;

    margin:0px auto;

    position:relative;

    font-family:'Myriad Pro',Arial,Helvetica,sans-serif;

    color:#fff;

    text-transform:uppercase;

    letter-spacing:-1px;

    border:3px solid #f0f0f0;

    overflow:hidden;

    -moz-box-shadow:0px 0px 10px #222;

    -webkit-box-shadow:0px 0px 10px #222;

    box-shadow:0px 0px 10px #222;

}

 

Так мы определим некоторым элементам  абсолютное позиционирование. Стиль изображения, который будет вставлен с помощью JQuery такой:

img.bg{

    position:absolute;

    top:0px;

    left:0px;

}

 

Неупорядоченный список со всеми нашими элементами  должен иметь более высокий Z-Index чем остальные элементы. 

.rotator ul{

    list-style:none;

    position:absolute;

    right:0px;

    top:0px;

    margin-top:6px;

    z-index:999999;

}

.rotator ul li{

    display:block;

    float:left;

    clear:both;

    width:260px;

}

 

Ссылка элементов меню будет иметь следующий стиль:

.rotator ul li a{

    width:230px;

    height:52px;

    float:right;

    clear:both;

    padding-left:10px;

    text-decoration:none;

    display:block;

    line-height:52px;

    background-color:#222;

    margin:1px -20px 1px 0px;

    opacity:0.7;

    color:#f0f0f0;

    font-size:20px;

    border:2px solid #000;

    border-right:none;

    outline:none;

    text-shadow:-1px 1px 1px #000;

    -moz-border-radius:10px 0px 0px 20px;

    -webkit-border-top-left-radius:10px;

    -webkit-border-bottom-left-radius:20px;

    border-top-left-radius:10px;

    border-bottom-left-radius:20px;

}

.rotator ul li a:hover{

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

}

 

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

Содержание элементов и заголовок будет иметь следующий стиль:

.rotator .heading{

    position:absolute;

    top:0px;

    left:0px;

    width:500px;

}

.rotator .heading h1{

    text-shadow:-1px 1px 1px #555;

    font-weight:normal;

    font-size:46px;

    padding:20px;

}

.rotator .description{

    width:500px;

    height:80px;

    position:absolute;

    bottom:0px;

    left:0px;

    padding:20px;

    background-color:#222;

    -moz-border-radius:0px 10px 0px 0px;

    -webkit-border-top-right-radius:10px;

    border-top-right-radius:10px;

    opacity:0.7;

    border-top:2px solid #000;

    border-right:2px solid #000;

}

.rotator .description p{

    text-shadow:-1px 1px 1px #000;

    text-transform:none;

    letter-spacing:normal;

    line-height:26px;

}

a.more{

    color:orange;

    text-decoration:none;

    text-transform:uppercase;

    font-size:10px;

}

a.more:hover{

    color:#fff;

}

 

 

JAVASCRIPT

Во-первых, нам нужно добавить JQuery сценарий, и мы будем также использовать JQuery плагин смягчения для создания некоторых эффектов смягчения:

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="jquery.easing.1.3.js"></script>

 

Мы добавим его  после всего содержимого, но до закрывающего тега. 
Затем мы добавляем это:

$(function() {

    /* the index of the current list element */

    var current = 1;

 

    /* function to iterate through all the list elements */

    var iterate = function(){

        var i = parseInt(current+1);

        var lis = $('#rotmenu').children('li').size();

        if(i>lis) i = 1;

        display($('#rotmenu li:nth-child('+i+')'));

    }

 

    /* Initially display the first one */

    display($('#rotmenu li:first'));

 

    /* In intervals of 3 seconds jump to the next element */

    var slidetime = setInterval(iterate,3000);

 

    /* if the User clicks on one list item, the auto slider stops */

    $('#rotmenu li').bind('click',function(e){

        clearTimeout(slidetime);

        display($(this));

        e.preventDefault();

    });

 

    /* displays each element associated to the "elem" list element */

    function display(elem){

        var $this   = elem;

        var repeat  = false;

        if(current == parseInt($this.index() + 1))

            repeat = true;

 

        /* slide in the current one */

        if(!repeat)

            $this.parent()

                 .find('li:nth-child('+current+') a')

                 .stop(true,true)

                 .animate({'marginRight':'-20px'},300,function(){

                $(this).animate({'opacity':'0.7'},700);

            });

 

        current = parseInt($this.index() + 1);

 

        var elem = $('a',$this);

 

        /* slide out the clicked or next one */

        elem.stop(true,true).animate({'marginRight':'0px','opacity':'1.0'},300);

 

        /* the heading and description will slide out, change the content and slide back in */

        var info_elem = elem.next();

        $('#rot1 .heading').animate({'left':'-420px'}, 500,'easeOutCirc',function(){

            $('h1',$(this)).html(info_elem.find('.info_heading').html());

            $(this).animate({'left':'0px'},400,'easeInOutQuad');

        });

        $('#rot1 .description').animate({'bottom':'-270px'},500,'easeOutCirc',function(){

            $('p',$(this)).html(info_elem.find('.info_description').html());

            $(this).animate({'bottom':'0px'},400,'easeInOutQuad');

        })

 

        /* the image will fade out and another will fade in */

        $('#rot1').prepend(

        $('<img alt="">',{

            style   :   'opacity:0',

            className : 'bg'

        }).load(

        function(){

            $(this).animate({'opacity':'1'},600);

            $('#rot1 img:first').next().animate({'opacity':'0'},700,function(){

                $(this).remove();

            });

        }

    ).attr('src','images/'+info_elem.find('.info_image').html())

     .attr('width','800')

     .attr('height','300')

    );

    }

});

 

Надеюсь, вам понравился этот урок!

Свойства CSS3 не будут работать в любой версии IE и округлые границы не будет работать в опере.

 

СМОТРЕТЬ ДЕМО                     СКАЧАТЬ ИСХОДНИК

 

Источник

Категория: CSS//HTML//JS | Просмотров: 529 | Добавил: Wrecker | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Вход

Гость
  • Вход
  • Регистрация
  • Читаемое

    Категории

    Заходи не жди