Imitation Taobao product picture magnifying glass effect based on jQuery

Imitation Taobao product picture magnifying glass effect based on jQuery_jquery

WBOY

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

Original

1601 people have browsed it

When developing a city, the image magnification function is often used. Here is a summary of the magnifying glass effects I have used in recent projects (not a plug-in).

Magnifying glass effect Commonly used js components jquery.imagezoom, jquery.jqzoom, jquery.zoom, etc. These components are similar. If you are interested, you can go to Baidu.

This article mainly uses non-component methods to create a magnifying glass effect.

Each picture must be generated in three sizes, otherwise the effect of the magnifying glass will not be too obvious. Here it is 54X54 320X320 800X800.

First look at the effect: when the mouse passes over the small image, the large image switches accordingly.

First is html

<div class="infoimg">
  <div class="mainImg" id="largePicDiv">
    <img id="largePic" src="FileUpload/20160120/20160120103334758_w.jpg" alt="Imitation Taobao product picture magnifying glass effect based on jQuery_jquery" />
    <div class="zoom_pup" id="move"></div>
    <div id="detailPic" class="big_pic">
      <img alt="Imitation Taobao product picture magnifying glass effect based on jQuery_jquery" src="FileUpload/20160120/20160120103334758_b.jpg" />
    </div>
  </div>
  <div class="allImg">
      <img src="FileUpload/20160120/20160120103334758_x.jpg" alt="Imitation Taobao product picture magnifying glass effect based on jQuery_jquery"/>
      <img src="FileUpload/20160120/20160120103334918_x.jpg" alt="Imitation Taobao product picture magnifying glass effect based on jQuery_jquery"/>
      <img src="FileUpload/20160120/20160120103335031_x.jpg" alt="Imitation Taobao product picture magnifying glass effect based on jQuery_jquery"/>
      <img src="FileUpload/20160120/20160120103335127_x.jpg" alt="Imitation Taobao product picture magnifying glass effect based on jQuery_jquery"/>
      <img src="FileUpload/20160120/20160120103335209_x.jpg" alt="Imitation Taobao product picture magnifying glass effect based on jQuery_jquery"/>

  </div>
        
</div>

Copy after login

Here the div with the id of move is the handle of the magnifying glass. The div with the id of detailPic is the magnifying glass on the right side

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

Copy after login

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

Copy after login

Of course, the bottom row of small pictures here still lacks a function, which is that when the pictures are larger than 5, the pictures can be scrolled left and right, so that pictures larger than 5 can be accommodated. The pictures used in the project here are generally less than 5, so this function does not exist. You can refer to Dangdang or JD.com.

The above is the code for jQuery to achieve the image magnifying glass effect. I hope it will be helpful to everyone's learning.