При наведении на миниатюру изображения, над ним появляется "Лупа" в которой отображается увеличенный фрагмент изображения.
Описание работы слайдера.
Для реализации такого zoom-эффекта на JQuery нужна простая html-разметка. Она состоит из общего контейнера .magnify, в котором размещена миниатюра изображения и контейнер для увеличенного изображения .large
HTML разметка
Для начала сделаем простой слайдер с автоматической прокруткой. Для его работы нужно два контейнера. Первый будет задавать размер видимой области слайдера, а второй нужен для размещения в нем слайдеров. Разметка слайдера будет иметь следующий вид:
<div class="magnify"> <div class="large"></div> <img class="small" src="images/img000004.jpg"/> </div>
Стили слайдера
.magnify, .small{ width:150px; } .magnify { position: relative; } .large { display: none; width: 150px; height: 150px; position: absolute; border-radius: 100%; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85), 0 0 6px 6px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25); background: url(../images/img000004.jpg) no-repeat; } .small { display: block; }
Скрипт
$(document).ready(function(){ var native_width = 0; // Переменные для хранения ширины ивысоты var native_height = 0; // оригинального изображения $(".magnify").mousemove(function(e){ // Когда курсор проходит над областью с изображением if(!native_width && !native_height) // Если курсор попал на эту область впервые { var image_object = new Image(); // Создается новый объект типа Image image_object.src = $(".small").attr("src"); // В качестве параметра src задается адрес изображения миниатюры native_width = image_object.width; // Ширина изображения native_height = image_object.height; // Высота изображения } else { var magnify_offset = $(this).offset(); // Координаты миниатюры относительно всего документа var mx = e.pageX - magnify_offset.left; // Координаты курсора относительно правого верхнего var my = e.pageY - magnify_offset.top; // края миниатюры // Если курсор не вышел за пределы миниатюры if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0) { $(".large").fadeIn(100); // Лупа становится видимой } else // Если курсор вышел за пределы миниатюры { $(".large").fadeOut(100); // Лупа скрывается } if($(".large").is(":visible")) // Если лупа видна { // Расчет координат для фона в лупе var rx = Math.round(mx/$(".small").width()*native_width - $(".large").width()/2)*-1; var ry = Math.round(my/$(".small").height()*native_height - $(".large").height()/2)*-1; var bgp = rx + "px " + ry + "px"; // Расчет координат положения лупы var px = mx - $(".large").width()/2; var py = my - $(".large").height()/2; // Изменение координат лупы и позиционирование фона внутри нее $(".large").css({left: px, top: py, backgroundPosition: bgp}); } } }) })
Ниже показана работа данного зуммера.
Комментарии