Простой эффект увеличения изображения. При наведении курсора на миниатюру, справа появляется ее увеличенная копия.
Вся конструкция состоит из двух блоков. В первом расположена миниатюра изображения. При наведении указателя мыши на миниатюру, справа появляется окно с увеличенной частью изображения. Передвигая курсор по миниатюре, можно увеличивать определенные ее части.
<div class="zoomer"> <div class="large"></div> <div class="small"></div> </div>
.zoomer{ width: 300px; height: 200px; position:relative; } .zoomer .small{ width: 300px; height: 200px; background: url(../images/img000003.jpg) no-repeat; background-size: cover; /* Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока. */ position: absolute; } .zoomer .large { background: url(../images/img000003.jpg) no-repeat; position: absolute; display:none; width: 600px; height: 400px; }
$(document).ready(function(){ var zoomMargin = 15; function startZoom(e) { $('.zoomer .large').css('left', $(this).width() + zoomMargin).show(); // Контейнер у большим изображением становится видимым. } function moveZoom(e) { var offset = $(this).offset(), // В переменной offset хранятся координаты блока с миниатюрой x = (e.pageX - offset.left), // В переменной хранится координата X курсора мыши относительно блока с миниатюрой y = (e.pageY - offset.top); // Координата Y курсора мыши. w = $(this).width(), // Ширина миниатюры h = $(this).height(), // Высота миниатюры // Позиционирование фона большого изображения относительно того, куда указывает курсор на миниатюре. $('.large').css({'background-position': (x / w * 100) + '% ' + (y / h * 100) + '%'}); } function endZoom(e) { $('.zoomer .large').hide(); // Контейнер с большим изображением скрывается } $('.small').on({ 'mouseenter': startZoom, // При наведении мыши на миниатюру срабатывает функция startZoom 'mousemove': moveZoom, // Когда курсор мыши перемещается внутри миниатюры срабатывает функция moveZoom 'mouseleave': endZoom // Когда мышь уходит из области миниатюры срабатывает функция endZoom }); })
Получился простой зуммер на JQuery.
Комментарии