Nachahmung des Taobao-Produktbild-Lupeneffekts basierend auf jQuery

Nachahmung des Taobao-Produktbild-Lupeneffekts basierend auf jQuery_jquery

WBOY

Freigeben： 2016-05-16 15:19:02

Original

1599 Leute haben es durchsucht

Bei der Entwicklung einer Stadt wird häufig die Bildvergrößerungsfunktion verwendet. Hier finden Sie eine Zusammenfassung der Lupeneffekte, die ich in letzten Projekten verwendet habe (kein Plug-In).

Lupeneffekt Häufig verwendete js-Komponenten jquery.imagezoom, jquery.jqzoom, jquery.zoom usw. Diese Komponenten sind ähnlich. Wenn Sie interessiert sind, können Sie nach Baidu gehen.

In diesem Artikel werden hauptsächlich Nichtkomponentenmethoden verwendet, um einen Lupeneffekt zu erzeugen.

Jedes Bild muss in drei Größen erstellt werden, sonst ist der Effekt der Lupe nicht zu offensichtlich. Hier ist es 54X54 320X320 800X800.

Sehen Sie sich zunächst den Effekt an: Wenn die Maus über das kleine Bild fährt, wechselt das große Bild entsprechend.

Zuerst ist HTML

<div class="infoimg">
  <div class="mainImg" id="largePicDiv">
    <img id="largePic" src="FileUpload/20160120/20160120103334758_w.jpg" alt="Nachahmung des Taobao-Produktbild-Lupeneffekts basierend auf jQuery_jquery" />
    <div class="zoom_pup" id="move"></div>
    <div id="detailPic" class="big_pic">
      <img alt="Nachahmung des Taobao-Produktbild-Lupeneffekts basierend auf jQuery_jquery" src="FileUpload/20160120/20160120103334758_b.jpg" />
    </div>
  </div>
  <div class="allImg">
      <img src="FileUpload/20160120/20160120103334758_x.jpg" alt="Nachahmung des Taobao-Produktbild-Lupeneffekts basierend auf jQuery_jquery"/>
      <img src="FileUpload/20160120/20160120103334918_x.jpg" alt="Nachahmung des Taobao-Produktbild-Lupeneffekts basierend auf jQuery_jquery"/>
      <img src="FileUpload/20160120/20160120103335031_x.jpg" alt="Nachahmung des Taobao-Produktbild-Lupeneffekts basierend auf jQuery_jquery"/>
      <img src="FileUpload/20160120/20160120103335127_x.jpg" alt="Nachahmung des Taobao-Produktbild-Lupeneffekts basierend auf jQuery_jquery"/>
      <img src="FileUpload/20160120/20160120103335209_x.jpg" alt="Nachahmung des Taobao-Produktbild-Lupeneffekts basierend auf jQuery_jquery"/>

  </div>
        
</div>

Nach dem Login kopieren

Hier ist das Div mit der ID „move“ der Griff der Lupe. Das Div mit der ID „detailPic“ ist die Lupe auf der rechten Seite

CSS

.infoimg { float: left; padding: 0 20px 30px 0; position: relative; width: 320px; }

.infoimg img { display: block; height: 320px; width: 320px; }

.allImg { height: 58px; margin: 15px 0 0 10px; overflow: hidden; width: 310px; }

.allImg img { cursor: pointer; float: left; height: 54px; margin-right: 3px; padding: 2px; width: 54px; }

.allImg img.current { border: 1px solid #f1f1f1; padding: 1px; }

.mainImg { position: relative; }

.mainImg .zoom_pup { background: url("../images/zoom_pup.png") repeat 0 0; cursor: move; height: 175px; left: 0px; position: absolute; top: 160px; width: 175px; display: none; }

.big_pic { background-color:#fff; border: 1px solid #f5f5f5; height: 400px; left: 320px; overflow: hidden; position: absolute; text-align: center; top: 0; width: 400px; display: none; }
.big_pic img{ width: 800px; height: 800px;}

Nach dem Login kopieren

JS-Code

//切换图片
  $(".allImg img").mouseover(function() {
    $(".allImg img").removeClass("current");
    $(this).addClass("current");
    var src = $(this).attr("src");
    $("#largePic").attr("src", src.replace("_x", "_w"));
    $("#detailPic img").attr("src", src.replace("_x", "_b"));

  });
  
  //放大镜效果
  $("#largePicDiv").bind("mousemove",
    function(e) {
      var ev = e || event;
      var mouseX = ev.pageX;
      var mouseY = ev.pageY;
      var picLeft = $("#largePic").offset().left;
      var picTop = $("#largePic").offset().top;
      var picWidth = $("#largePic").width();
      var picHeight = $("#largePic").height();
      var xLength = mouseX - picLeft;
      var yLength = mouseY - picTop;
      var qWidth = picWidth / 4;
      var lastQWidth = picWidth - picWidth / 4;
      var qHeight = picHeight / 4;
      var lastQHeight = picHeight - picHeight / 4;
      if (xLength < qWidth) {
        $("#move").css("left","0px");
      } else {
        if (xLength > lastQWidth) {
          $("#move").css("left", (lastQWidth - qWidth) + "px");
        } else {
          $("#move").css("left", (xLength - qWidth) + "px");
        }
      }
      if (yLength < qHeight) {
        $("#move").css("top", "0px");
      } else {
        if (yLength > lastQHeight) {
          $("#move").css("top", (lastQHeight - qHeight) + "px");
        } else {
          $("#move").css("top", (yLength - qHeight) + "px");
        }
      }
      $("#detailPic > img").css("left", parseInt($("#move").css("left")) * (-800 / picWidth) + "px").css("top", parseInt($("#move").css("top")) * (-800 / picWidth) + "px").css("position", "absolute");
    });

Nach dem Login kopieren

Natürlich fehlt der unteren Reihe der kleinen Bilder hier noch eine Funktion, nämlich dass bei Bildern größer als 5 die Bilder nach links und rechts gescrollt werden können, sodass Bilder größer als 5 untergebracht werden können. Die im Projekt hier verwendeten Bilder sind im Allgemeinen weniger als 5, daher ist diese Funktion nicht vorhanden. Sie können auf Dangdang oder JD.com verweisen.

Das Obige ist der jQuery-Code zum Erzielen des Bildlupeneffekts. Ich hoffe, er wird für das Lernen aller hilfreich sein.