Based on jquery imitation Taobao products picture Magnifier special effects _jquery

In the development of the mall, often use the image amplification function, here in the recent project to use the magnifying glass effect to do a summary (non-plug-ins).

Magnifier effect commonly used JS component Jquery.imagezoom,jquery.jqzoom,jquery.zoom and so on these components are similar. If you are interested, you can go to Baidu.

This article mainly uses the non component method to do the magnifying glass effect.

Each picture must produce three kinds of dimensions, otherwise the magnifying glass effect is not too obvious, here is 54x54 320x320 800X800.

First look at the effect: the mouse through a small map, the larger picture with the switch.

First is the HTML

 <div class= "infoimg" > <div class= "mainimg" id= "Largepicdiv" >  <div class= "zoom_ Pup "id=" move "></div> <div id=" Detailpic "class=" Big_pic ">  </div> </div> <div class=" allimg "> < IMG src= "fileupload/20160120/20160120103334758_x.jpg" alt= "with friends to find a way (Part II): All 8 volumes of"/>     </div> </div> 

Here the DIV with the ID move is the magnifying glass handle ID is detailpic div is right magnifier

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

JS Code

Toggle Picture $ (". 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"));
  
  });
      Magnifier effect $ ("#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");

 });

Of course, here is the bottom of a row of small pictures also lacks a function, is when the picture is larger than 5 can scroll around the picture, so that can accommodate more than 5 picture. The pictures used in this project are generally less than 5, so this function is not, we can refer to when or Jingdong.

The above is the jquery realization picture Magnifier effect Code, hope to be helpful to everybody's study.