Essayez de créer une loupe javascript effect_javascript skills-js tutoriel-php.cn

Essayez de créer une loupe javascript effect_javascript skills

WBOY

Libérer： 2016-05-16 15:23:31

original

1280 Les gens l'ont consulté

L'exemple de cet article présente le principe et le code de réalisation de l'effet loupe basé sur JavaScript, et le partage avec vous pour votre référence. Le contenu spécifique est le suivant :

Principe :

A : Loupe B : Petite photo

C : Grande zone visible de l'image

D : Grande image

La position de la souris doit être au centre de la loupe, donc la position de la souris est :

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

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

Pendant le mouvement de la souris : la loupe A et la grande image D se déplacent ensemble proportionnellement à la souris, car lorsque le bord droit de la loupe A se déplace pour coïncider avec le bord droit de la petite image B, la grande image D doit également bouger à droite La bordure chevauche la bordure droite de C, donc leur rapport de mouvement est : (D.offsetWidth-C.offsetWidth)/(B.offsetWidth-A.offsetWidth)=b/a

Partie HTML :

<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>

Copier après la connexion

partie js :

<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>

Copier après la connexion

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde pour réaliser l'effet loupe javascript.