English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Реализация эффекта увеличения изображения с помощью native js

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

Первый способ - это имитация эффекта лупы на странице покупки на Taobao, когда курсор мыши перемещается на изображение товара, на изображении появляется прямоугольная область, а эта область и есть та, которую вы хотите увеличить, затем справа от изображения товара появляется увеличенное изображение товара. Этот способ требует только правильного расчета коэффициента увеличения и изменения значений scrollLeft и scrollTop области увеличения для достижения соответствующего эффекта увеличения.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Image Zoomer</title>
<style media="screen">
*{
margin: 0;
padding: 0;
}
/*Parent tag of the visible area*/
.wrap{
width: 400px;
height:auto;
border: 1px solid black;
display: inline-block;
position: absolute;
left: 0;
top: 0;
}
.wrap>img{
width: 100%;
height: auto;
}
/*Locking the zoomed rectangular area*/
.box{
border: 1px solid black;
width: 100px;
height: 100px;
background: rgba(0, 0, 0, 0.5);
opacity: 0.8;
position: absolute;
cursor: pointer;
display: none;
}
/*Parent element to display the zoomed image*/
.main{
width: 700px;
height: 700px;
margin-left: 420px;
overflow:hidden;
display:none;
position: absolute;
top: 0;
}
.main>img{
width:2800px;
height:auto;
}
</style>
</head>
<body>
<div class="wrap">
<img src="dog.jpg" alt="" />
<div class="box"></div>
</div>
<div class="main">
<img src="dog.jpg"alt="" />
</div>
<script type="text/javascript">
//Get four objects
var wrap=document.querySelector('.wrap');
var box=document.querySelector('.box');
var main=document.querySelector('.main');
var mainImg=document.querySelector('.main img');
//Add move event
wrap.onmousemove=function(){
//мouseover visible image appears Locking zoom area and zoom image
box.style.display='block';
main.style.display='block';
var event=window.event || event;
//Получение смещения мыши от края видимой области
var disx=event.clientX-box.offsetWidth/2;
var disy=event.clientY-box.offsetHeight/2;
//Максимальный диапазон перемещения прямоугольной области
var distanceMaxX=wrap.offsetWidth-box.offsetWidth;
var distanceMaxY=wrap.offsetHeight-box.offsetHeight;
//определить, чтобы прямоугольная область масштабирования не выходила за рамки
if (disx<=0) {
disx=0;
}
if (disy<=0) {
disy=0;
}
if(disx>=distanceMaxX) {
disx=distanceMaxX;
}
if(disy>=distanceMaxY) {
disy=distanceMaxY;
}
box.style.left=disx+'px';
box.style.top=disy+'px';
//получить коэффициент масштабирования
var scalex=box.offsetLeft/distanceMaxX;
var scaley=box.offsetTop/distanceMaxY;
main.scrollLeft=(mainImg.clientWidth-main.clientWidth)*scalex;
main.scrollTop=(mainImg.clientHeight-main.clientHeight)*scaley;
}
//добавить событие выхода
wrap.onmouseout=function(){
box.style.display='none';
main.style.display='none';
}
</script>
</body>
</html>

Превью效果的:

Второй способ заключается в прямом увеличении изображения на исходном原图, как лупа на поверхности, это расширение первого способа, предыдущие методы не имеют отличий, только в конце не нужно размещать визуальную область, а напрямую показывать увеличенное изображение в определенной области放大, когда вы изменяете значения left и top области放大, автоматически изменяется соответствующее значение left и top изображения, достигая эффекта синхронного увеличения

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Масштабирование</title>
<style type="text/css">
.main{
width: 500px;
height: 570px;
border: 2px solid black;
position: relative;
/*overflow: hidden;*/
}
#img1{
width: 100%;
height: 100%;
}
.box{
width: 200px;
height: 200px;
border-radius: 200px;
/*border: 1px solid black;*/
display: none;
position: absolute;
overflow: hidden;
cursor:move;
}
//Увеличить изображение, дать абсолютное позиционирование, чтобы при перемещении оно также двигалось
Реализовать синхронизацию с закрепленной областью
#img2{
width: 1200px;
height: 1400px;
position: absolute;
/*left: 0;
top: 0;*/
/*display: none;*/
}
</style>
</head>
<body>
<div class="main">
<img id="img1" src="dog.jpg"/>
<div class="box">
<img id="img2" src="dog.jpg"/>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var main=document.querySelector('.main');
var box=document.querySelector('.box');
var boximg=document.querySelector('#img2');
//Добавление события перемещения мыши
main.addEventListener('mousemove',move,false);
function move(){
//Отображение увеличенной круговой области
box.style.display='block';
var event=window.event||event;
//Получение смещения мыши от края видимой области
var disx=event.clientX-box.offsetWidth/2;
var disy=event.clientY-box.offsetHeight/2;
var dismax=main.offsetWidth-box.offsetWidth;
var dismay=main.offsetHeight-box.offsetHeight;
//Максимальный диапазон перемещения прямоугольной области
if (disx<=0) {
disx=0;
}
if (disx>=dismax) {
disx=dismax-2;
}
if(disy<=0){
disy=0;
}
if(disy>=dismay){
disy=dismay-2;
}
//Когда вы перемещаетесь, изменяйте значения left и top для круговой области.
box.style.left=disx+'px';
box.style.top=disy+'px';
// var scalx=main.offsetWidth/box.offsetWidth
// var scaly=main.offsetHeight/box.offsetHeight;
// Также, когда вы перемещаете изображение, его координаты top и left также должны быть изменены
boximg.style.left=-event.clientX*2+'px';
boximg.style.top=-event.clientY*2+'px';
// box.scrollLeft=(boximg.offsetWidth-box.offsetWidth);
// box.scrollTop=(boximg.offsetHeight-box.offsetHeight);
}
// Добавить событие при выведении мыши
main.addEventListener('mouseout',out,false);
function out(){
box.style.display='none';
}
</script>

Превью效果的:

Заключение: Как вы видите,其实 два способа увеличения совершенно не отличаются, сначала вам нужно получить область для увеличения, то есть прямоугольник или круг, который вы хотите увеличить. Затем показать изображение в заданной области. Надеюсь, эти два кода помогут вам, спасибо!!!

Рекомендуем к просмотру