تحقيق تأثير تضخيم الصور باستخدام JavaScript

اليوم سأشارككم برنامج تكبير الصور الذي كتبته بلغة JavaScript، لقد قمت بإنشاء نوعين من التأثيرات التكبير، وبالمناسبة، فإن مبادئهما متشابهة، كلاهما يستخدمان صورتين لتحديد حجم الصورتين بشكل مناسب، ويظهران في مواقع مختلفة، مما يحقق تأثير التكبير النهائي.

أول نوع هو أنني أتبع تأثير مكبر العدسة في صفحة التسوق لتوبيتاو، عندما يتحرك المؤشر الفارغ فوق صورة المنتج، يظهر منطقة مستطيلة على صورة المنتج، وهذا هو منطقة التكبير التي تريد تكبيرها، ثم يظهر صورة المنتج المكبرة على الجانب الأيمن من صورة المنتج. طريقة التكبير هذه تتطلب حساب نسبة التكبير بشكل صحيح، ثم تحقيق تأثير التكبير المناسب من خلال تعديل قيم scrollLeft وscrollTop للمنطقة المكبرة.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>مكبّر الصور</title>
<style media="screen">
*{
margin: 0;
padding: 0;
}
／＊الشجرة التي تحتوي على منطقة العرض＊／
.wrap{
width: 400px;
height:auto;
border: 1px solid black;
display: inline-block;
position: absolute;
left: 0;
top: 0;
}
.wrap>img{
width: 100%;
height: auto;
}
／＊منطقة المربع التكبير المحددة＊／
.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;
}
／＊الشجرة التي يتم عرض الصورة التكبيرة فيها＊／
.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">
//الحصول على أربعة كائنات
var wrap=document.querySelector('.wrap');
var box=document.querySelector('.box');
var main=document.querySelector('.main');
var mainImg=document.querySelector('.main img');
//إضافة أحداث الحركة
wrap.onmousemove=function(){
//النقر على الصورة المرئية يظهر منطقة التكبير والمجسم المكبر
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;
}
إذا (disy<=0) {
disy=0;
}
إذا (disx>=distanceMaxX) {
disx=distanceMaxX;
}
إذا (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;
// بنفس الطريقة، عندما تتحرك، يجب تعديل قيم left وtop للصورة المكبرة
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>

معاينة النتائج:

الخاتمة: كما رأيتم، في الواقع لا يوجد فرق كبير بين طريقتي التكبير، أولاً يجب أن تحصل على منطقة التكبير التي تريد تكبيرها، أي المثلث والدائرة التي تم ذكرها سابقًا. ثم عرض الصورة التي تريد تكبيرها في منطقة معينة. آمل أن تساعدكم هذه الأجزاء من الكود، شكرًا لك！！!

تعليميات الأساس

أعجبك هذا