Kesan kaca pembesar gambar produk Taobao tiruan berdasarkan jQuery_jquery

Apabila membangunkan bandar, fungsi pembesaran imej sering digunakan Berikut ialah ringkasan kesan kaca pembesar yang telah saya gunakan dalam projek baru-baru ini (bukan pemalam).

Kesan kaca pembesar Komponen js yang biasa digunakan jquery.imagezoom, jquery.jqzoom, jquery.zoom, dsb. Komponen ini adalah serupa. Jika berminat, boleh ke Baidu.

Artikel ini menggunakan kaedah bukan komponen untuk mencipta kesan kaca pembesar.

Setiap gambar mesti dijana dalam tiga saiz, jika tidak, kesan kaca pembesar tidak akan terlalu jelas. Ini adalah 54X54 320X320 800X800.

Pertama lihat kesannya: apabila tetikus melepasi imej kecil, imej besar bertukar dengan sewajarnya.

Pertama ialah html

<div class="infoimg">
  <div class="mainImg" id="largePicDiv">
    <img id="largePic" src="FileUpload/20160120/20160120103334758_w.jpg" alt="Kesan kaca pembesar gambar produk Taobao tiruan berdasarkan jQuery_jquery" />
    <div class="zoom_pup" id="move"></div>
    <div id="detailPic" class="big_pic">
      <img alt="Kesan kaca pembesar gambar produk Taobao tiruan berdasarkan jQuery_jquery" src="FileUpload/20160120/20160120103334758_b.jpg" />
    </div>
  </div>
  <div class="allImg">
      <img src="FileUpload/20160120/20160120103334758_x.jpg" alt="Kesan kaca pembesar gambar produk Taobao tiruan berdasarkan jQuery_jquery"/>
      <img src="FileUpload/20160120/20160120103334918_x.jpg" alt="Kesan kaca pembesar gambar produk Taobao tiruan berdasarkan jQuery_jquery"/>
      <img src="FileUpload/20160120/20160120103335031_x.jpg" alt="Kesan kaca pembesar gambar produk Taobao tiruan berdasarkan jQuery_jquery"/>
      <img src="FileUpload/20160120/20160120103335127_x.jpg" alt="Kesan kaca pembesar gambar produk Taobao tiruan berdasarkan jQuery_jquery"/>
      <img src="FileUpload/20160120/20160120103335209_x.jpg" alt="Kesan kaca pembesar gambar produk Taobao tiruan berdasarkan jQuery_jquery"/>

  </div>
        
</div>

Di sini div dengan id of move ialah pemegang kaca pembesar Div dengan id detailPic ialah kanta pembesar di sebelah kanan

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

Kod JS

//切换图片
  $(".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");
    });

Semestinya baris bawah gambar kecil di sini masih kekurangan fungsi iaitu apabila gambar lebih besar daripada 5, gambar boleh di scroll ke kiri dan ke kanan, supaya gambar yang lebih besar daripada 5 dapat ditampung. Gambar yang digunakan dalam projek di sini biasanya kurang daripada 5, jadi fungsi ini tidak wujud Anda boleh merujuk kepada Dangdang atau JD.com.

Di atas ialah kod jQuery untuk mencapai kesan kaca pembesar imej saya harap ia akan membantu pembelajaran semua orang.