jQuery плавное оптическе масштабирование изображения на основе jQuery системы . Настройка исходного и конечного размеров увеличения изображения . |
|
HTML данного примера .
<script type="text/javascript">
$(function(){$('.zoom').hover(function(){$(this).stop().animate({width:"565px",height:"619px",left:"0px",top:"0px"},400);},
function(){$(this).stop().animate({width:"135px",height:"152px",left:"0px",top:"0px"},400);});});
</script>
<div style="position: relative; top: 0px; left: 0px; margin: 0px; padding: 0px; width: 135px; height: 152px;">
<img src="http://runettex.clan.su/FPC/FPOptic.jpg" class="zoom" alt="" style="position: absolute; top: 0px; left: 0px; width: 135px; height: 152px;">
</div>
Для начала рассмотрим HTML . Назначение и роль всех тегов их стилей и значений .
Начнём с самого изображения FPOptic.png используемого в этом примере .
<img src="http://runettex.clan.su/FPC/FPOptic.png" class="zoom" alt="" style="position: absolute; top: 0px; left: 0px; width: 135px; height: 152px;">
Описание тегов изображения .
1 . 1 Стиль изображения position: absolute; top: 0px; left: 0px; является стилем абсолютного позицирования элемента в котором он находится . Вставлен туда для того что бы при работе скрипта масштабирования , при увеличении изображения оно не воздействовало на окружающие его элементы страницы . Например на текст и визуально на саму форму вида материалов новостей , если подобное изображение будет вставлено в новость . Изображение будет просто увеличиваться не смещая остальное содержание страницы .
1 . 2 Стиль изображения width: 135px; height: 152px; является стилем размеров , с которыми изображение будет отображаться на странице независимо от его настоящих размеров .
1 . 3 Класс class="zoom" является по сути идентификатором изображения необходимым скрипту jQuery для воздействия на размеры изображения .
1 . 1 Стиль изображения position: absolute; top: 0px; left: 0px; является стилем абсолютного позицирования элемента в котором он находится . Вставлен туда для того что бы при работе скрипта масштабирования , при увеличении изображения оно не воздействовало на окружающие его элементы страницы . Например на текст и визуально на саму форму вида материалов новостей , если подобное изображение будет вставлено в новость . Изображение будет просто увеличиваться не смещая остальное содержание страницы .
1 . 2 Стиль изображения width: 135px; height: 152px; является стилем размеров , с которыми изображение будет отображаться на странице независимо от его настоящих размеров .
1 . 3 Класс class="zoom" является по сути идентификатором изображения необходимым скрипту jQuery для воздействия на размеры изображения .
Рассмотрим роль оставшегося элемента HTML примера .
<div style="position: relative; top: 0px; left: 0px; margin: 0px; padding: 0px; width: 135px; height: 152px;">
Описание первой строки HTML .
2 . 1 Стиль изображения position: relative; top: 0px; left: 0px; является стилем относительного позицирования элемента в котором он находится . Вставлен туда для того что бы изображение с абсолютным позицированием не " улетело " влево вверх со своего места в которое будет установлено .
2 . 2 Стиль margin: 0px; в данном примере его значение равно нулю , в реальности , например в новостях нужно будет присвоить значение больше нуля . Что бы например текст не прилипал к изображению и само изображение не прилипало к сторонам формы вида материалов .
2 . 3 Стиль padding: 0px; заставляет обтекать изображение div_ом в котором оно расположено без зазора по всем сторонам .
2 . 4 Стили width: 135px; height: 152px; являются стилями размеров длинны и высоты div тега HTML данного примера , должны по значениям быть равными таким же стилям изображения ( пункт 1 . 2 ) .
2 . 1 Стиль изображения position: relative; top: 0px; left: 0px; является стилем относительного позицирования элемента в котором он находится . Вставлен туда для того что бы изображение с абсолютным позицированием не " улетело " влево вверх со своего места в которое будет установлено .
2 . 2 Стиль margin: 0px; в данном примере его значение равно нулю , в реальности , например в новостях нужно будет присвоить значение больше нуля . Что бы например текст не прилипал к изображению и само изображение не прилипало к сторонам формы вида материалов .
2 . 3 Стиль padding: 0px; заставляет обтекать изображение div_ом в котором оно расположено без зазора по всем сторонам .
2 . 4 Стили width: 135px; height: 152px; являются стилями размеров длинны и высоты div тега HTML данного примера , должны по значениям быть равными таким же стилям изображения ( пункт 1 . 2 ) .
Рассмотрим скрипт масштабирования изображения .
<script type="text/javascript">
$(function(){$('.zoom').hover(function(){$(this).stop().animate({width:"565px",height:"619px",left:"0px",top:"0px"},400);},
function(){$(this).stop().animate({width:"135px",height:"152px",left:"0px",top:"0px"},400);});});
</script>
Описание скрипта масштабирования . Вторая строка .
3 . 1 Во второй строке последовательно прописаны ,
размер изображения по ширине до которого изображение будет увеличиваться width:"565px"
3 . 2 Размер изображения по высоте до которого он будет увеличиваться height:"619px"
3 . 3 Координаты начального смещения относительно места расположения , left:"0px",top:"0px" лучше оставить нулевыми и задавать смешение изображения его стилями , в случае необходимости , а не стилем скрипта .
3 . 4 Это значение 400 определяет в течении какого времени изображение будет увеличиваться от исходных размеров определённых в стилях избражения до максимальных , значение измеряется в милисекундах .
3 . 1 Во второй строке последовательно прописаны ,
размер изображения по ширине до которого изображение будет увеличиваться width:"565px"
3 . 2 Размер изображения по высоте до которого он будет увеличиваться height:"619px"
3 . 3 Координаты начального смещения относительно места расположения , left:"0px",top:"0px" лучше оставить нулевыми и задавать смешение изображения его стилями , в случае необходимости , а не стилем скрипта .
3 . 4 Это значение 400 определяет в течении какого времени изображение будет увеличиваться от исходных размеров определённых в стилях избражения до максимальных , значение измеряется в милисекундах .
Описание скрипта масштабирования . Третья строка .
3 . 1 Во третьей строке последовательно прописаны ,
размер изображения по ширине до которого изображение будет уменьшаться после увеличения width:"135px" , должно быть по значеню равно значанию длинны из стиля изображения и стиля div ( пункт 1 . 2 и пункт 2 . 4 ) .
3 . 2 Размер изображения по высоте до которого он будет уменьшаться после увеличения height:"152px" , должно быть по значеню равно значанию длинны из стиля изображения и стиля div ( пункт 1 . 2 и пункт 2 . 4 ) .
3 . 3 Координаты смещения после уменьшения относительно места расположения , left:"0px",top:"0px" лучше оставить нулевыми .
3 . 4 Это значение 400 определяет в течении какого времени изображение будет уменьшаться с максимальных до исходных размеров определённых в стилях избражения .
3 . 1 Во третьей строке последовательно прописаны ,
размер изображения по ширине до которого изображение будет уменьшаться после увеличения width:"135px" , должно быть по значеню равно значанию длинны из стиля изображения и стиля div ( пункт 1 . 2 и пункт 2 . 4 ) .
3 . 2 Размер изображения по высоте до которого он будет уменьшаться после увеличения height:"152px" , должно быть по значеню равно значанию длинны из стиля изображения и стиля div ( пункт 1 . 2 и пункт 2 . 4 ) .
3 . 3 Координаты смещения после уменьшения относительно места расположения , left:"0px",top:"0px" лучше оставить нулевыми .
3 . 4 Это значение 400 определяет в течении какого времени изображение будет уменьшаться с максимальных до исходных размеров определённых в стилях избражения .