Versuchen Sie, einen Javascript-Lupeneffekt zu erstellen. Javascript-Fähigkeiten-js-Tutorial-php.cn

Versuchen Sie, einen Javascript-Lupeneffekt zu erstellen. Javascript-Fähigkeiten

WBOY

Freigeben： 2016-05-16 15:23:31

Original

1315 Leute haben es durchsucht

Das Beispiel in diesem Artikel stellt das Prinzip und den Code zur Realisierung des Lupeneffekts basierend auf JavaScript vor und teilt ihn als Referenz mit Ihnen. Der spezifische Inhalt lautet wie folgt:

Grundsatz:

A: Lupe B: Kleines Bild

C: Großer sichtbarer Bildbereich

D: Gesamtbild

Die Mausposition sollte sich in der Mitte der Lupe befinden, also ist die Mausposition:

clientX=A.offsetLeft() B.offsetLeft 1/2*A.offsetWidth;

clientY=A.offsetTop() B.offsetTop 1/2*A.offsetHeight;

Während der Mausbewegung: Lupe A und großes Bild D bewegen sich gemeinsam im Verhältnis zur Maus, denn wenn sich der rechte Rand von Lupe A so bewegt, dass er mit dem rechten Rand von kleinem Bild B übereinstimmt, sollte sich auch großes Bild D bewegen nach rechts Der Rand überlappt den rechten Rand von C, daher ist ihr Bewegungsverhältnis : (D.offsetWidth-C.offsetWidth)/(B.offsetWidth-A.offsetWidth)=b/a

HTML-Teil:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>放大镜效果</title>

<style>

*{
margin:0;
padding:0; 
}

#demo{
position: relative;
margin:30px 50px;
width: 1000px;
height: 600px;
border: 1px solid #000;
}

#zhezhao{
position: absolute;
z-index:2;
background:red;
width:402px;
height:402px;
left: 20px;
top:20px;
opacity: 0;
}

#small{
position: absolute;
width:402px;
height:402px;
left: 20px;
top:20px;
border: 1px solid #000;
z-index: 1;
}


#small img{
position: absolute;

}


#big{
position: relative;
top: 20px;
left: 460px;
width:500px;
height:500px;
border: 1px solid #000;
overflow: hidden;
display: none;
z-index: 1;
}


#big img{
position: absolute;

}


#glass{
position: absolute;
width:100px;
height: 100px;
opacity: 0.3;
background:orange;
display: none;
}

</style>


</head>


<body>
<div id='demo'>
<div id='zhezhao'> </div> 
<!-- 在ie浏览器中，当鼠标在放大镜上是，浏览器并不认为鼠标同样在小图的div上，所以加个遮罩层 兼容ie-->


<div id='small'> 
<img src='images/small.png' alt=''>
<div id='glass'></div>
</div>
<div id='big'>
<img src='images/big.jpg' alt='' >

</div>

</div>



</body>

</html>

Nach dem Login kopieren

js-Teil:

<script>

window.onload=function(){
var demo =document.getElementById('demo');
var small =document.getElementById('small');
var big =document.getElementById('big');
var glass =document.getElementById('glass')
var image =document.getElementById('big').getElementsByTagName('img')[0];
var zhezhao=document.getElementById('zhezhao');

zhezhao.onmouseover=function(){
glass.style.display='block'
big.style.display='block'
}
zhezhao.onmouseout=function(){
glass.style.display='none'
big.style.display='none'
}

//弄清楚clientX，offsetLeft，left的关系，注意区分
zhezhao.onmousemove=function(ev){
var event=ev
var left=event.clientX-demo.offsetLeft-small.offsetLeft-glass.offsetWidth/2;
var top =event.clientY-demo.offsetTop -small.offsetTop -glass.offsetHeight/2;
if(left<0){
left=0;
}else if(left>(small.offsetWidth-glass.offsetWidth)){
left=small.offsetWidth-glass.offsetWidth
}

if(top<0){
top=0;
}else if(top>(small.offsetHeight- glass.offsetHeight)){
top=small.offsetHeight- glass.offsetHeight
}
glass.style.left =left+'px';
glass.style.top =top+'px';

 

var percent=(image.offsetWidth-big.offsetWidth)/(small.offsetWidth-glass.offsetWidth)

image.style.left=-percent*left+'px'
image.style.top =-percent*top+'px'



}
}

</script>

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er allen dabei hilft, den Javascript-Lupeneffekt zu erkennen.