4.05.13, 16:51
0 комментарий
  Уроки

Контент скрывающийся за изображением (jQuery)

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

Для подключения на сайт этого эффекта надо подгрузить библиотеку jQuery (если она ещё не подгружена), файл с каскадными таблицами стилей и добавить в документ код инициализации, все необходимые файлы в архиве контент за изображением.

В коде инициализации плагина можно изменить некоторые настройки:

$(function() {
$(".slideBox").hover(function(){
$(this).find("img").stop().animate({
top:-213
}, 500);
}, function(){
$(this).find("img").stop().animate({
top:0
}, 500);
});
});
$(function() {
$(".slideBoxSphere").hover(function(){
$(this).find("img").stop().animate({
top:-200
}, 1500);
}, function(){
$(this).find("img").stop().animate({
top:0
}, 4500);
});
});


В этом коде две функции с 1 по 11 строку для первого изображения, остальное для второго.

+ В 4-ой строке указывается высота на которую будет «приподниматься» изображение, у меня указана высота изображения.
+ В 5-ой строке указывается время «поднятия» изображения.
+ В 8-ой строке указывается в какое положение должно вернуться изображение 0 — по умолчанию (исходная позиция).
+ В 9-ой строке указывается время «опускания» изображения.

СКАЧАТЬ

Вес файла
28.22 Kb

Напишите своё мнение