Ich glaube, jeder kennt den Lupeneffekt. In unserer Entwicklung wird JavaScript häufig verwendet, um den Lupeneffekt zu erzielen, insbesondere in Projekten wie Entwicklerzentren, wo er häufig verwendet wird Daher stellen wir Ihnen heute ein einfaches Beispiel für die Verwendung von JavaScript zur Erzielung des Lupeneffekts vor.
Idee:
Lassen Sie zunächst den Verschiebeblock und den Bimg-Block ausblenden. Wenn sich die Maus zum Feld bewegt, lassen Sie den Verschiebeblock und den Bimg-Block erscheinen und holen Sie sich die Maus Die aktuelle Position wird dann berechnet, um dem Bewegungsblock und dem Bimg-Block entsprechende Werte zu geben und den Lupeneffekt zu erzielen (die Berechnung der Positionen des Bewegungsblocks und des Bimg-Blocks wird später ausführlich beschrieben)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<link href="css/bigimg.css" rel="stylesheet" />
<script src="js/bigimg.js"></script>
</head>
<body onload="bigimg()">
<p id="box">
<img src="images/simg.jpg" alt="#">
<p id="move"></p>
<p id="bimg">
<img id="b_bimg" src="images/bimg.jpg" alt="#">
</p>
</p>
</body>
</html>CSS-Stil:
*{
margin:0px;
padding:0px;
}
#box{
width:430px;
height:430px;
margin:100px;
margin-left:17%;
position:relative;//这里使用相对定位，好让其他的元素能依靠这个元素定位
}
#move{
background-image:url(../images/move.png);
width:220px;
height:220px;
position:absolute;
left:0px;
top:0px;
display:none;//先让他隐藏，用js使其显示
}
#bimg{
width:430px;
height:430px;
overflow:hidden;
position:absolute;
top:0px;
left:450px;
display:none;//先让他隐藏，用js使其显示
}
#bimg img{
width:800px;
height:800px;
position:absolute;
top:0px;
left:0px;
}Javascript:
function bigimg(){
var bbox = document.getElementById("box");
var bmove = document.getElementById("move");
var bbimg = document.getElementById("bimg");
var b_bimg = document.getElementById("b_bimg");
bbox.onmouseover = function(){//鼠标移动到box上显示大图片和选框
bbimg.style.display = "block";
bmove.style.display="block";
}
bbox.onmouseout = function(){//鼠标移开box不显示大图片和选框
bbimg.style.display = "none";
bmove.style.display="none";
}
bbox.onmousemove = function(e){//获取鼠标位置
var x = e.clientX;//鼠标相对于视口的位置
var y = e.clientY;
var t = bbox.offsetTop;//box相对于视口的位置
var l = bbox.offsetLeft;
var _left = x - l - bmove.offsetWidth/2;//计算move的位置
var _top = y - t -bmove.offsetHeight/2;
if(_top<=0)//滑到box的最顶部
_top = 0;
else if(_top>=bbox.offsetHeight-bmove.offsetHeight)//滑到box的最底部
_top = bbox.offsetHeight-bmove.offsetHeight ;
if(_left<=0)//滑到box的最左边
_left=0;
else if(_left>=bbox.offsetWidth-bmove.offsetWidth)//滑到box的最右边
_left=bbox.offsetWidth-bmove.offsetWidth ;
bmove.style.top = _top +"px";//设置move的位置
bmove.style.left = _left + "px";
var w = _left/(bbox.offsetWidth-bmove.offsetWidth);//计算移动的比例
var h = _top/(bbox.offsetHeight-bmove.offsetHeight);
var b_bimg_top = (b_bimg.offsetHeight-bbimg.offsetHeight)*h;//计算大图的位置
var b_bimg_left = (b_bimg.offsetWidth-bbimg.offsetWidth)*w;
b_bimg.style.top = -b_bimg_top + "px";//设置大图的位置信息
b_bimg.style.left = -b_bimg_left + "px";
}
}Rendering:
1. Berechnung des Bewegungsblocks
Schwarzer Pfeil:
var x = e.clientX;//鼠标相对于视口的位置 var y = e.clientY;
Roter Pfeil:
var t = bbox.offsetTop;//box相对于视口的位置 var l = bbox.offsetLeft;
Orange Pfeil:
var _left = x - l - bmove.offsetWidth/2;//计算move的位置 var _top = y - t -bmove.offsetHeight/2;
2. Berechnung des BIMG-Blocks
Verwenden Sie den Anteil des Bewegungsblocks innerhalb des Bewegungsbereichs, um die Position des großen Bildes festzulegen.
Der Bewegungsbereich des Bewegungsblocks:
bbox.offsetWidth-bmove.offsetWidth
Das Verhältnis der aktuellen Koordinaten des Bewegungsblocks zum beweglichen Bereich:
var w = _left/(bbox.offsetWidth-bmove.offsetWidth);//计算移动的比例 var h = _top/(bbox.offsetHeight-bmove.offsetHeight);
bimg Bewegungsbereich:
b_bimg.offsetHeight-bbimg.offsetHeight
bimg Position:
var b_bimg_top = (b_bimg.offsetHeight-bbimg.offsetHeight)*h;//计算大图的位置 var b_bimg_left = (b_bimg.offsetWidth-bbimg.offsetWidth)*w;
Zusammenfassung :
Ich glaube, Sie werden diesen Artikel lesen. Die Studie hat mir ein besseres Verständnis dafür vermittelt, wie man den Lupeneffekt mit JavaScript implementiert. Es ist eine gute Wahl für Freunde, die es nicht verstehen Ich hoffe, dass er Ihnen bei Ihrer Arbeit hilfreich sein wird!
Verwandte Empfehlungen:
So verwenden Sie jQuery, um den Lupeneffekt zu erzielen
Leinwand implementiert den Vergrößerungsglaseffekt
Das obige ist der detaillierte Inhalt vonBeispiel für JavaScript, das den Effekt einer Lupe implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
