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 и CSS3. Основная задача — изменить фоновое изображение и плавно изменить заголовок и описание. При нажатии на элемент меню функция автоматического изменения останавливается, и выезжают соответствующие материалы.

 

 

Демонстрация работыСкачать исходный код

Итак, давайте начнем с разметки.

Разметка

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

<div>

<ul id="rotmenu">

<li>

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

<div style="display:none;">

<div>1.jpg</div>

<div>Our Works</div>

<div>

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="#">Read more</a>

</div>

</div>

</li>

<li>

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

<div style="display:none;">

<div>2.jpg</div>

<div>We serve</div>

<div>

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="#">Read more</a>

</div>

</div>

</li>

...

</ul>

<div id="rot1">

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

<div>

<h1></h1>

</div>

<div>

<p></p>

</div>

</div>
</div>

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

CSS

У основного блока, названного ротатором, будут такие стили:

.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>

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

$(function() {

/* Индекс текущего элемента списка */

var current = 1;

/* Функция перебора всех элементов списка */

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+')'));

}

/* В начале показать первый */

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

/* Через 3 секунды перепрыгнуть на следующий */

var slidetime = setInterval(iterate,3000);

/* Если пользователь нажимает на элемент списка, автоматическое изменение содержимого останавливается */

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

clearTimeout(slidetime);

display($(this));

e.preventDefault();

});

/* Показать каждый элемент, связанный с элементами списка elem */

function display(elem){

var $this   = elem;

var repeat  = false;

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

repeat = true;

/* Задвигается текущий элемент */

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);

/* Выдвигается элемент, на который нажали, или следующий */

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

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

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');

})

/* Текущее изображение будет плавно исчезать и следующее будет плавно появляться */

$('#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')

);

}
});

 

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

P.S. В браузере Google Chrome это выглядит очень красиво, проверьте сами. Свойства CSS3 не будут работать в браузере Internet Explorer, и закругленные границы могут не работать в браузере Opera.

Демонстрация работыСкачать исходный код

Автор урока Mary Lou

Перевод — Дежурка

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

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

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

60
    +42 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

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