Exemple de JavaScript implémentant l'effet d'une loupe-js tutoriel-php.cn

Exemple de JavaScript implémentant l'effet d'une loupe

黄舟

Libérer： 2017-11-24 09:40:00

original

1632 Les gens l'ont consulté

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>

Copier après la connexion

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

Copier après la connexion

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";
  }
    
}

Copier après la connexion

Rendu :

1. Calcul du bloc de déplacement

Flèche noire :

var x = e.clientX;//鼠标相对于视口的位置
var y = e.clientY;

Copier après la connexion

Flèche rouge :

var t = bbox.offsetTop;//box相对于视口的位置
var l = bbox.offsetLeft;

Copier après la connexion

Flèche orange :

var _left = x - l - bmove.offsetWidth/2;//计算move的位置
var _top = y - t -bmove.offsetHeight/2;

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

bimg Plage de mouvement :

b_bimg.offsetHeight-bbimg.offsetHeight

Copier après la connexion

position bimg :

var b_bimg_top = (b_bimg.offsetHeight-bbimg.offsetHeight)*h;//计算大图的位置
var b_bimg_left = (b_bimg.offsetWidth-bbimg.offsetWidth)*w;

Copier après la connexion

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

Explication détaillée d'exemples d'utilisation de CSS pour implémenter l'effet de loupe d'image (image)

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!