Рубрика CSS
Создание мозаичного слайд-шоу с помощью jQuery и CSS
При проектировании веб-страниц очень часто приходится сталкиваться с необходимостью вывода изображений в определенной последовательности, такой как слайд-шоу. С расширением библиотеки Jquery и ее многочисленных плагинов открывается изобилие готовых решений, для решения данной проблемы. Однако, чтобы произвести неизгладимое впечатление на ваших посетителей, необходимо удивить их невиданным.
В сегодняшнем уроке с помощью Jquery и CSS мы создадим слайд-шоу с использованием эффекта мозаики. Применение эффекта мозаики придаст выразительность при переходе от одного слайда к другому.
Шаг 1 – XHTML
Эффект мозаики достигается путем деления исходного изображения на более мелкие части. Эти плитки, которые содержат части последовательных изображений, изначально зрительно скрыты, благодаря чему и достигается данный эффект. Код разметки данного слайд-шоу довольно прост. Он состоит из основного контейнера (#mosaic-slideshow), двух элементов div, образующих левую и правую стрелку перехода, а также из непосредственных div элементов, образующих мозаику.
demo. html
<div id="mosaic-slideshow">
<div></div>
<div></div>
<div style="z-index: 10;">
<!-- The mosaic-slide div and the tiles are generated by jQuery -->
<div style="..."></div>
<div style="..."></div>
<div style="..."></div>
<div style="..."></div>
</div>
</div>К элементу div с классом mosaic-slide примененa функция JavaScript, которая выполняется при нажатии стрелки перехода (мы еще вернемся к нему в третьем шаге). Внутри данного контейнера содержатся еще элементы div, образующие мозаику. В общей сложности их 56, каждый из которых имеет размер 60px х 60px и образует фон.
Шаг 2 – CSS
Для того чтобы достичь необходимого эффекта в наш файл стилей мы должны добавить несколько строк кода. Здесь представлен код непосредственно используемый галереей. Остальную часть кода вы можете просмотреть в демонстрационной версии в файле styles.css.
styles.css – Часть 1
#mosaic-slideshow{
/* The slideshow container div */
height:500px;
margin:0 auto;
position:relative;
width:670px;
}
.mosaic-slide{
/* This class is shared between all the slides */
left:80px;
position:absolute;
top:25px;
border:10px solid #555;
/* CSS3 rounded corners */
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
}
.tile{
/* The individual tiles */
height:60px;
width:60px;
float:left;
border:1px solid #555;
border-width:0 1px 1px 0;
background-color:#555;
}Слайд-шоу содержится внутри Div с идентификатором mosaic-slideshow. На странице может быть только один Div, так как мы используем ID атрибут.
Однако на странице может быть больше чем один mosaic-slide. Сам эффект достигается за счет наложения двух слайдов друг на друга с последующим скрытием одной плитки и показом другой. Вот почему мы используем название класса вместо идентификатора.
Также здесь представлены некоторые правила из стандарта CSS3, такие как закругленные углы. Так как стандарт CSS3 еще в стадии разработки, не все браузеры поддерживают свойство border-radius (за исключением Opera версии 10,50), поэтому мы используем префикс -moz- для Firefox и -webkit- для Safari и Chrome.
styles.css – Часть 2
.arrow{
/* The prev/next arrows */
width:35px;
height:70px;
background:url("img/arrows.png") no-repeat;
position:absolute;
cursor:pointer;
top:50%;
margin-top:-35px;
}
.arrow.left{
left:15px;
background-position:center top;
}
.arrow.left:hover{
background-position:center -70px;
}
.arrow.right{
right:15px;
background-position:center -140px;
}
.arrow.right:hover{
background-position:center -210px;
}
.clear{
/* This class clears the floats */
clear:both;
}Состояние стрелок подразделяется на следующую и предыдущую, следовательно они нуждаются в индивидуальной стилизации. В качестве фона мы будем использовать изображения спрайты. Это избавит нас от необходимости использования четырех отдельных изображений.
«CSS spriting» является широко распространенным методом, используемым веб-дизайнерами. Это позволяет проектировщику вместо нескольких изображений, использовать одно большое, называемое спрайтом, которое загружается быстрее и позволяет уменьшить нагрузку на веб-сервер. После этого, разработчик использует свойство CSS для отображения только необходимых частей изображения Sprite.
Шаг 3 – jQuery
После подключения библиотеки JQuery, мы можем перейти к созданию сценария, который будет создавать эффект слайд-шоу. Для достижения эффекта мозаики, сценарий будет определять 4 функции:
transition() – эта функция делает анимированный переход между слайдами;
generateGrid () – эта функция используется transition(), для генерации элементов мозаичного изображения. Каждый элемент мозаичного изображения содержит часть изображения слайд и является его фоном;
next() – определяет следующий слайд – и выполняет функцию transition();
prev() – аналогично next().
script.js – Часть 1
/* The slide images are contained in the slides array. */
var slides = new Array('img/slide_1.jpg',
'img/slide_2.jpg',
'img/slide_3.jpg',
'img/slide_4.jpg',
'img/slide_5.jpg');
$(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */
$('.arrow.left').click(function(){
prev();
/* Clearing the autoadvance if we click one of the arrows */
clearInterval(auto);
});
$('.arrow.right').click(function(){
next();
clearInterval(auto);
});
/* Preloading all the slide images: */
for(var i=0;i<slides.length;i++)
{
(new Image()).src=slides[i];
}
/* Showing the first one on page load: */
transition(1);
/* Setting auto-advance every 10 seconds */
var auto;
auto=setInterval(function(){
next();
},10*1000);
});
Функция $(document).ready() выполняется после того, как страница закончила загружаться. Она гарантирует, что все div и другие элементы доступны для выполнения скрипта. Данная функция связана с событием щелчка по стрелкам перехода и предварительной загрузки первого слайда. Также содержит интервал авто-перехода.
script.js – Часть 2
var current = {};
function transition(id)
{
/* This function shows the slide specified by the id. */
if(!slides[id-1]) return false;
if(current.id)
{
/* If the slide we want to show is currently shown: */
if(current.id == id) return false;
/* Moving the current slide layer to the top: */
current.layer.css('z-index',10);
/* Removing all other slide layers that are positioned below */
$('.mosaic-slide').not(current.layer).remove();
}
/* Creating a new slide and filling it with generateGrid: */
var newLayer = $('<div>').html(generateGrid({rows:7,cols:8,image:slides[id-1]}));
/* Moving it behind the current slide: */
newLayer.css('z-index',1);
$('#mosaic-slideshow').append(newLayer);
if(current.layer)
{
/* Hiding each tile of the current slide, exposing the new slide: */
$('.tile',current.layer).each(function(i){
var tile = $(this);
setTimeout(function(){
tile.css('visibility','hidden');
},i*10);
})
}
/* Adding the current id and newLayer element to the current object: */
current.id = id;
current.layer = newLayer;
}Функция перехода использует текущий глобальный объект для хранения идентификатора текущего слайда, а также ссылки на Div текущего слайда. Это в дальнейшем используется для удаления остатков слайда и предотвращение перехода, если слайд в настоящее время активный.
Обратите внимание, как мы используем каждый метод в строке 31 при отображении текущего слайда и график их скрытия в I * 10 миллисекунд, в будущем. Это означает, что они скрываются с интервалом 10 миллисекунд друг за другом.
script.js – Часть 3
function next()
{
if(current.id)
{
transition(current.id%slides.length+1);
}
}
function prev()
{
if(current.id)
{
transition((current.id+(slides.length-2))%slides.length+1);
}
}
/* Width and height of the tiles in pixels: */
var tabwidth=60, tabheight=60;
function generateGrid(param)
{
/* This function generates the tile grid, with each tile containing a part of the slide image */
/* Creating an empty jQuery object: */
var elem = $([]),tmp;
for(var i=0;i<param.rows;i++)
{
for(var j=0;j<param.cols;j++)
{
tmp = $('<div>', {
"class":"tile",
"css":{
"background":'#555 url('+param.image+') no-repeat '+(-j*tabwidth)+'px '+(-i*tabheight)+'px'
}
});
/* Adding the tile to the jQuery object: */
elem = elem.add(tmp);
}
/* Adding a clearing element at the end of each line. This will clearly divide the divs into rows: */
elem = elem.add('<div></div>');
}
return elem;
}Передаваемый параметр generateGrid () является объектом, содержащий строки, столбцы, а также изображения, которые будут устанавливаться в качестве фона плитки. При генерации плиток, фон создается с отступами в зависимости от текущего расположения плитки в ряду и колонке. В конце плитка добавляется к пустому объекту jQuery, который выводится в конце.
На этом создание мозаики завершено!
Заключение.
Сегодня мы создали слайд-шоу с анимированным эффектом мозаики. Вы можете изменять количество выводимых строк и столбцов.
