English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Heute möchte ich Ihnen einen von mir geschriebenen Bildvergrößerungseffekt mit js teilen. Ich habe zwei Arten von Vergrößerungseffekten gemacht, ihre Prinzipien sind aber ähnlich. Beide verwenden zwei Bilder, zwei Bilder werden entsprechende Größen zugewiesen und schließlich an verschiedenen Positionen angezeigt, um den Vergrößerungseffekt zu erreichen.
Eine Art ist, dass ich mich an das Vergrößerungsglas der淘宝购物seite angelehnt habe. Wenn der Mauszeiger auf das Produktbild bewegt wird, erscheint ein Rechteckbereich auf dem Bild, und dieser Bereich ist der zu vergrößernde Bereich. Dann erscheint ein vergrößertes Produktbild auf der rechten Seite des Produktbildes. Diese Art der Vergrößerung erfordert nur, dass Sie die Vergrößerungsrate berechnen und dann die scrollLeft- und scrollTop-Werte des Vergrößerungsbereichs ändern, um den entsprechenden Vergrößerungseffekt zu erzielen.
<!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">
//Erhalte vier Objekte
var wrap=document.querySelector('.wrap');
var box=document.querySelector('.box');
var main=document.querySelector('.main');
var mainImg=document.querySelector('.main img');
//Füge das Bewegen-Ereignis hinzu
wrap.onmousemove=function(){
//Ein Erscheinen des festgelegten Vergrößerungsrechtecks und des vergrößerten Bildes nach dem Einführen der Maus in das sichtbare Bild
box.style.display='block';
main.style.display='block';
var event=window.event || event;
//Ermitteln Sie den Versatz des Mauszeigers vom Rand des sichtbaren Bereichs
var disx=event.clientX-box.offsetWidth/2;
var disy=event.clientY-box.offsetHeight/2;
//der größtmögliche bewegliche Bereich des Rechtecks
var distanceMaxX=wrap.offsetWidth-box.offsetWidth;
var distanceMaxY=wrap.offsetHeight-box.offsetHeight;
// Überprüfe, ob das festgelegte Vergrößerungsrechteck nicht aus dem Rahmen herausgeht
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';
//Berechne das Vergrößerungsfaktor
var scalex=box.offsetLeft/distanceMaxX;
var scaley=box.offsetTop/distanceMaxY;
main.scrollLeft=(mainImg.clientWidth-main.clientWidth)*scalex;
main.scrollTop=(mainImg.clientHeight-main.clientHeight)*scaley;
}
//Füge das Ausblenden-Ereignis hinzu
wrap.onmouseout=function(){
box.style.display='none';
main.style.display='none';
}
</script>
</body>
</html>
效果预览：
Die zweite Methode ist es, direkt auf das Originalbild zu zoomen, wie eine Lupe darauf, dies ist eine Erweiterung der ersten Methode. Die vorherigen Methoden unterscheiden sich nicht, nur dass am Ende keine sichtbare Fläche mehr erforderlich ist. Zeige das vergrößerte Bild direkt im ursprünglich festgelegten Bereich an. Wenn du die Werte von left und top des Vergrößerungsbereichs änderst, werden gleichzeitig die entsprechenden Werte des Bildes geändert, um eine Synchronvergrößerungseffekt zu erzielen.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vergrößerungsglas</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;
}
//Vergrößern Sie das Bild, lassen Sie es durch absolute Positionierung beim Bewegen auch mitbewegen
Implementieren Sie die Synchronisation mit dem festgelegten Bereich
#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');
//Fügen Sie die Mausbewegungsereignisse hinzu
main.addEventListener('mousemove',move,false);
function move(){
//Zeige das vergrößerte runde Gebiet an
box.style.display='block';
var event=window.event||event;
//Ermitteln Sie den Versatz des Mauszeigers vom Rand des sichtbaren Bereichs
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;
//der größtmögliche bewegliche Bereich des Rechtecks
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>
效果预览：
结束语：大家也看到了，实际上两种放大方式并没有什么区别，首先你需要获取要放大的区域，也就是之前所说的锁定放大区域的矩形和圆形。然后给要放大的图片指定一个显示区域。希望这两段代码对大家有所帮助，谢谢！！！