English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Сегодня я хочу поделиться с вами одним из эффектов увеличения изображений, который я создал на 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>
Превью效果的:
Заключение: Как вы видите,其实 два способа увеличения совершенно не отличаются, сначала вам нужно получить область для увеличения, то есть прямоугольник или круг, который вы хотите увеличить. Затем показать изображение в заданной области. Надеюсь, эти два кода помогут вам, спасибо!!!