Заходи
Гость

Хостинг

Статистика
Яндекс.Метрика Счетчик PR-CY.Rank
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Ccылки

Свежак

Главная » 2013 » Ноябрь » 11 » ДОВОЛЬНО ПРОСТОЙ СЛАЙДЕР-МЕНЮ С JQUERY И CSS3
12:26
ДОВОЛЬНО ПРОСТОЙ СЛАЙДЕР-МЕНЮ С 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 и округлые границы не будет работать в опере.

 

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

 

Источник

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

Статьи
[Менеджмент]
Факторы микросреды организации
[Безопасность систем]
Защита исходных текстов и двоичного кода
[Устронение ошибок систем]
Сообщения об ошибках AMI BIOS (часть 2)
[Прогараммирование]
Разработка ПО с открытыми исходными текстами как особый вид прикладной науки
[Устронение ошибок систем]
Возможные нежелательные последствия разгона
[Прогараммирование]
Как работает CSS?(часть 2 Шрифты, Текст и Ссылки)
[Устронение ошибок систем]
Использование "чистой загрузки" для устранения неполадок в работе Windows
[Операционные системы]
MAC OS
[Прогараммирование]
Как работает CSS?
[Прогараммирование]
ДОКУМЕНТИРОВАНИЕ ПРОГРАММ

Категории
HTML/CSS [21]
jQuery/JS [36]
PHP [4]
Для Ucoz [38]

Популярный софт
Iron Kaspersky Internet Security 2015
Kaspersky Internet Security 2015
Iron Virtual DJ
Virtual DJ
Iron SoundForge 11
SoundForge 11
Iron Alcohol 120
Alcohol 120
Iron Norton Internet Security 2014
Norton Internet Security 2014
Iron Loaris Trojan Remover
Loaris Trojan Remover

Жми

Copyright MyCorp © 2018Конструктор сайтов - uCoz