Maison > Article > interface Web > Exemple de JavaScript implémentant l'effet d'une loupe
Exemple de JavaScript implémentant l'effet d'une loupe
- 黄舟original
- 2017-11-24 09:40:001577parcourir
Je pense que tout le monde connaît l'effet loupe Dans notre développement, JavaScript est souvent utilisé pour obtenir l'effet loupe, en particulier dans des projets tels que les centres commerciaux de développeurs, où il est couramment utilisé. effet de verre, nous allons donc aujourd'hui vous présenter un exemple simple d'utilisation de JavaScript pour obtenir l'effet de loupe.
Idée :
Masquez d'abord le bloc de déplacement et le bloc bimg Lorsque la souris se déplace vers la boîte, affichez le bloc de déplacement et le bloc bimg et obtenez. la souris La position actuelle est ensuite calculée pour donner des valeurs appropriées au bloc de déplacement et au bloc bimg pour obtenir l'effet loupe (le calcul des positions du bloc de déplacement et du bloc bimg sera décrit en détail plus tard)
<!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>style CSS :
*{
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";
}
}Rendu :
1. Calcul du bloc de déplacement
Flèche noire :
var x = e.clientX;//鼠标相对于视口的位置 var y = e.clientY;
Flèche rouge :
var t = bbox.offsetTop;//box相对于视口的位置 var l = bbox.offsetLeft;
Flèche orange :
var _left = x - l - bmove.offsetWidth/2;//计算move的位置 var _top = y - t -bmove.offsetHeight/2;
Calcul du bloc bimg
Utiliser la proportion du bloc de déplacement dans la plage mobile Pour définir la position de la grande image
La plage de déplacement du bloc de déplacement :
bbox.offsetWidth-bmove.offsetWidth
Le rapport des coordonnées actuelles du déplacer le bloc vers la plage mobile :
var w = _left/(bbox.offsetWidth-bmove.offsetWidth);//计算移动的比例 var h = _top/(bbox.offsetHeight-bmove.offsetHeight);
bimg Plage de mouvement :
b_bimg.offsetHeight-bbimg.offsetHeight
position bimg :
var b_bimg_top = (b_bimg.offsetHeight-bbimg.offsetHeight)*h;//计算大图的位置 var b_bimg_left = (b_bimg.offsetWidth-bbimg.offsetWidth)*w;
Résumé :
Je crois que vous lirez cet article L'étude m'a permis de mieux comprendre JavaScript pour obtenir l'effet loupe. C'est un bon choix pour les amis qui ne comprennent pas l'effet loupe. . J'espère que cela sera utile à votre travail !
Recommandations associées :
Comment utiliser jQuery pour obtenir l'effet loupe
Canvas implémente l'effet de loupe
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!