главная

Теги:


Создаем галерею изображений с использованием библиотеки Raphael

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

Библиотека Raphael является отличным инструментом для работы с векторной графикой. В нашем уроке мы будет использовать лишь небольшую часть ее потенциальных возможностей. По утверждениям разработчиков Raphael поддерживает браузеры: Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ и Internet Explorer 6.0+.

Итак, приступим.

Создаем три файла: index.html, css/default.css, js/init.js и загружаем библиотеку Raphael. Затем включаем все необходимые файлы в разделе head:





 

index.html

Разметка HTML для галереи достаточно проста.


 

Мы создаем основной контейнер 'gallery', который содержит неупорядоченный список изображений. Все изображения должны быть одного размера. В нашем примере используется размер 400px х 400px.

 

default.css

 ul.reset,
ul.reset li {
    display:block;
    list-style:none;
    padding:0;
    margin:0;
}
 
 
.gallery ul li {
    width:200px; /* Половина ширины изображения */
    height:200px; /* Половина высоты изображения */
    margin:0 10px 10px 0;
    float:left;
    position:relative;
}
 
.holder {
    position:absolute;
    top:0;
    left:0;
    margin:-100px 0 0 -100px; /* margin-left: половина ширины элемента 'li' width, а margin-top: половина высоты элемента 'li' */
}

Стили также содержат типовые и простые правила.

init.js

$(function(){
     
    var li = $('.gallery').find('li'); 	// Ищем все элементы 'li'
         
    li.each(function(i){
        var t = $(this),
            img = t.find('img'), 	// Ищем изображение в элементе 'li'
            src = img.attr('src'), 	// Получаем путь к изображению 
            width = li.width(), 	// Получаем ширину 'li'
            height = li.height(); 	// Получаем высоту 'li'
             
        img.hide().after($('
').attr('id', 'holder'+i).addClass('holder')); // Скрываем все изображения и создаем контейнеры для объектов Raphael var r = Raphael('holder'+i, width*2, height*2), // Создаем объекты Raphael rimg = r.image(src, width/2, height/2, width, height); // Создаем новое изображение с использованием предыдущей переменной rimg.hover(function() { this.animate({ scale: 2, // Увеличиваем ваше изображение до нормального размера rotation : 360 }, 1200, 'elastic'); }, function() { this.animate({ scale: 1, // Уменьшаем размер изображений rotation : 0 }, 1200, 'elastic'); }); }); li.hover(function(){ li.css({ 'z-index': 1 }); // Устанавливаем z-index для всех элементов 'li' $(this).css({ 'z-index': 2 }); // Устанавливаем z-index для элемента, над которым находится курсор мыши }); });

Готово!

Источник урока: playground.mobily.pl/tutorials/creating-a-modern-gallery-with-raphael/demo.html

Урок Создан:2011-05-23 Просмотров:4724

Добавить комментарий:


Copyright© 2009 Hosted by Zhost