Heim > Artikel > Web-Frontend > Beispiel für JavaScript, das den Effekt einer Lupe implementiert

Beispiel für JavaScript, das den Effekt einer Lupe implementiert

黄舟Original: 2017-11-24 09:40:001630Durchsuche

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

Detaillierte Erläuterung von Beispielen für die Verwendung von CSS zur Implementierung des Bildlupeneffekts (Bild)

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Ausführliche Erläuterung der Verwendung von eval in JavaScriptNächster Artikel：Ausführliche Erläuterung der Verwendung von eval in JavaScript

In Verbindung stehende Artikel

Mehr sehen