Эффект приближения для миниатюр

Создадим эффект приближения для миниатюр с помощью jQuery. Масштаб миниатюр будет изменяться в зависимости от расстояния между ними и курсором мыши.

В уроке используется плагин jQuery Proximity, который написал James Padolsey.

 

Разметка HTML

Мы будем использовать неупорядоченный список миниатюр с секцией описания (в первой демонстрации не используется):

<ul id="pe-thumbs" class="pe-thumbs">
    <li>
        <a href="#">
            <img src="/images/thumbs/1.jpg" />
            <div class="pe-description">
                <h3>Заголовок описания</h3>
                <p>Текст описания</p>
            </div></a>
    </li>
    <li><!-- ... --></li>
</ul>

 

CSS

Неупорядоченный список будет центрироваться на странице и иметь тематическое фоновое изображение, просвечивающее через миниатюры с низким значение непрозрачности:

.pe-thumbs{
    width: 900px;
    height: 400px;
    margin: 20px auto;
    position: relative;
    background: transparent url(../images/3.jpg) top center;
    border: 5px solid #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

Мы также слегка затонируем фоновое изображение с помощью псевдо-элемента с фоновым цветом в формате rgba:

.pe-thumbs:before {
    content: "";
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(255,102,0,0.2);
}

Список пунктов будет смещаться влево и мы установим относительное положение ссылок и изображений:

.pe-thumbs li{
    float: left;
    position: relative;
}
.pe-thumbs li a,
.pe-thumbs li a img{
    display: block;
    position: relative;
}

Каждая миниатюра будет иметь начальную ширину 100 px и непрозрачность 0.2:

.pe-thumbs li a img{

    width: 100px;

    opacity: 0.2;

}

Описание будет скрыто по умолчанию и затем выводиться с помощью JavaScript:

.pe-thumbs li a div.pe-description{
    width: 200px;
    height: 100px;
    background: rgba(0,0,0,0.8);
    position: absolute;
    top: 0px;
    left: -200px;
    color: white;
    display: none;
    z-index: 1001;
    text-align: left;
}

В завершение определим стили для описания:

.pe-description h3{
    padding: 10px 10px 0px 10px;
    line-height: 20px;
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    font-size: 22px;
    margin: 0px;
}
.pe-description p{
    padding: 10px 0px;
    margin: 10px;
    font-size: 11px;
    font-style: italic;
    border-top: 1px solid rgba(255,255,255,0.3);
}

 

JavaScript

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

Затем надо привязать событие приближения к изображению. Масштаб изображения будет изменяться в соответствии с положением курсора мыши. Как только масштаб получит максимальное значение, установим большой z-index, чтобы миниатюра выводилась поверх всего, и выведем соответствующее описание:

						// Список миниатюр
						var $list		= $('#pe-thumbs'),
						// Ширина и смещение влево списка.
						// Данные значения будут использоваться для получения положения контейнера описания.
						listW		= $list.width(),
						listL		= $list.offset().left,
						// Изображения
						$elems		= $list.find('img'),
						// Контейнер описания
						$descrp		= $list.find('div.pe-description'),
						// maxScale : максимально значение масштаба, которое может иметь изображение
						// minOpacity / maxOpacity : минимальное (устанавливается в CSS) и максимальное значение непрозрачности изображения
						settings	= {
							maxScale	: 1.3,
							maxOpacity	: 0.9,
							minOpacity	: Number( $elems.css('opacity') )
						},
						init		= function() {
							
							// minScale устанавливается в CSS 
							settings.minScale = _getScaleVal() || 1;
							// Предварительная загрузка миниатюр
							_loadImages( function() {
								
								_calcDescrp();
								_initEvents();
							
							});
						
						},
						// Получаем значение масштаба из CSS с помощью JavaScript:
						_getScaleVal= function() {
						
							var st = window.getComputedStyle($elems.get(0), null),
								tr = st.getPropertyValue("-webkit-transform") ||
									 st.getPropertyValue("-moz-transform") ||
									 st.getPropertyValue("-ms-transform") ||
									 st.getPropertyValue("-o-transform") ||
									 st.getPropertyValue("transform") ||
									 "fail...";

							if( tr !== 'none' ) {	 

								var values = tr.split('(')[1].split(')')[0].split(','),
									a = values[0],
									b = values[1],
									c = values[2],
									d = values[3];

								return Math.sqrt( a * a + b * b );
							
							}
							
						},
						// Вычисляем значения для контейнера описания
						// на основе установочных переменных
						_calcDescrp	= function() {
							
							$descrp.each( function(i) {
							
								var $el		= $(this),
									$img	= $el.prev(),
									img_w	= $img.width(),
									img_h	= $img.height(),
									img_n_w	= settings.maxScale * img_w,
									img_n_h	= settings.maxScale * img_h,
									space_t = ( img_n_h - img_h ) / 2,
									space_l = ( img_n_w - img_w ) / 2;
								
								$el.data( 'space_l', space_l ).css({
									height	: settings.maxScale * $el.height(),
									top		: -space_t,
									left	: img_n_w - space_l
								});
							
							});
						
						},
						_initEvents	= function() {
						
							$elems.on('proximity.Photo', { max: 80, throttle: 10, fireOutOfBounds : true }, function(event, proximity, distance) {
								
								var $el			= $(this),
									$li			= $el.closest('li'),
									$desc		= $el.next(),
									scaleVal	= proximity * ( settings.maxScale - settings.minScale ) + settings.minScale,
									scaleExp	= 'scale(' + scaleVal + ')';
								
								// Изменяем z-index элемента, как только будет достигнуто максимальное значение масштаба.
								// Также показываем контейнер описания
								if( scaleVal === settings.maxScale ) {
									
									$li.css( 'z-index', 1000 );
									
									if( $desc.offset().left + $desc.width() > listL + listW ) {
										
										$desc.css( 'left', -$desc.width() - $desc.data( 'space_l' ) );
									
									}
									
									$desc.fadeIn( 800 );
									
								}	
								else {
									
									$li.css( 'z-index', 1 );
								
									$desc.stop(true,true).hide();
								
								}	
								
								$el.css({
									'-webkit-transform'	: scaleExp,
									'-moz-transform'	: scaleExp,
									'-o-transform'		: scaleExp,
									'-ms-transform'		: scaleExp,
									'transform'			: scaleExp,
									'opacity'			: ( proximity * ( settings.maxOpacity - settings.minOpacity ) + settings.minOpacity )
								});

							});
						
						},
						_loadImages	= function( callback ) {
							
							var loaded 	= 0,
								total	= $elems.length;
							
							$elems.each( function(i) {
								
								var $el = $(this);
								
								$('<img/>').load( function() {
									
									++loaded;
									if( loaded === total )
										callback.call();
									
								}).attr( 'src', $el.attr('src') );
							
							});
						
						};
					
					return {
						init	: init
					};


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/mzjPUbO_1fo/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Эффект приближения для миниатюр | | 2012-06-19 12:00:12 | | Статьи Web-мастеру | | Создадим эффект приближения для миниатюр с помощью jQuery. Масштаб миниатюр будет изменяться в зависимости от расстояния между ними и курсором мыши.В уроке используется плагин jQuery Proximity, | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: