Implementieren Sie eine Bildvergrößerungsfunktion basierend auf jquery_jquery

Das Beispiel in diesem Artikel teilt Ihnen den spezifischen Implementierungscode von jquery zur Implementierung der Bildvergrößerungsfunktion als Referenz mit. Der spezifische Inhalt ist wie folgt.

Die Bildvergrößerungsfunktion ähnelt der Anzeige von Produkten auf Taobao. Wenn die Maus über das kleine Bild bewegt wird, wird das große Bild an der entsprechenden Position angezeigt. Es wäre mühsam, diesen Code selbst zu schreiben. Eine Klassenbibliothek – jquery.jqzoom.js – wird auf der offiziellen Website bereitgestellt. Sie müssen lediglich die Unterklassenbibliothek vorstellen, auf diese Klassenbibliothek verweisen und etwas CSS-Code hinzufügen, um diese Funktion zu erreichen Das HTML-Framework lautet wie folgt:

<div class="jqzoom">
  <img class="fs lazy"  src="/static/imghwm/default1.png"  data-src="images/pro_img/blue_one_small.jpg"  alt="" jqimg="images/pro_img/blue_one_big.jpg" id="bigImg"/>
</div>

Beachten Sie, dass

img das jqimg-Attribut haben muss. Dieses Attribut enthält die Adresse des großen Bildes; JS-Code lautet wie folgt:

<script type="text/javascript">
    $(function () {
      $(".jqzoom").jqueryzoom({
        xzoom: 300,   //放大图的宽度（默认是200）
        yzoom: 300,   //放大图的高度（默认是200）
        offset: 10,   //离原图的距离（默认是10）
        position: "right",   //放大图的定位（默认是"right"）
        preload: 1
      })
    })
  </script>

Verwendung:

$(".jqzoom").jqueryzoom Wenn Sie nur so viel Code hinzufügen, wird der Effekt sichtbar, aber er ist nicht so ideal. Um schöner zu sein, muss der folgende CSS-Code hinzugefügt werden:

<style type="text/css">
    .jqzoom{
      border:1px solid #BBB;
      float:left;
      position:relative;
      padding:0px;
      cursor:pointer;
    }
    
    /*jQzoom*/
    div.zoomdiv {
      z-index:  999;
      position        : absolute;
      top:0px;
      left:0px;
      width          : 200px;
      height         : 200px;
      background: #ffffff;
      border:1px solid #CCCCCC;
      display:none;
      text-align: center;
      overflow: hidden;
    }
    div.jqZoomPup {
      z-index         : 999;
      visibility       : hidden;
      position        : absolute;
      top:0px;
      left:0px;
      width          : 50px;
      height         : 50px;
      border: 1px solid #aaa;
      background: #ffffff url(../images/zoomlens.gif) 50% top no-repeat;;
      opacity: 0.5;
      -moz-opacity: 0.5;
      -khtml-opacity: 0.5;
      filter: alpha(Opacity=50);
    }
  </style>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für alle beim Erlernen der JQuery-Programmierung hilfreich ist.