Realization of magnifying glass effect based on jquery _jquery

Major shopping malls detailed page product picture effects show, the mouse over small figure shows the figure, the mouse over the figure show large picture display, jquery magnifying glass effect picture similar picture magnifying glass display, improve user experience design, jquery picture Magnifier effect is a typical picture effects show.

The effect chart is as follows:

Picture big box Initial style:

 <div class= "Goods-imginfo-bimg-box" style= Background-image:url (http://www.od.my/images/201507/thumb_img/142_ Thumb_p_1435792664520.jpg); position:relative; " ></div>

Add Enlarge area box and enlarge effect box

picbox=$ ('. Goods-imginfo-bimg-box ');
Picbox.css (' position ', ' relative ');
Picbox.append (' <div class= ' Mag-sbox "></div>");
Picbox.append (' <div class= ' Mag-box "></div>");

Add a style sheet

$ ("Head"). Append (' <link rel= "stylesheet" type= "Text/css" href= "Themes/od/css/mag.css" > ");

Style

@CHARSET "utf-"; . mag-sbox{position:absolute;border:px solid #fff; Background-color:rgba (,,,.);
 Cursor:crosshair;z-index:;d Isplay:none;}
 . Mag-box{position:absolute;left:%;top:;margin-left:px;border:px solid #ccc; width:%;height:%;
 Background-size:cover;background-color: #fff; Z-index:;d isplay:none; JS/* Magnifier effect * Do not change the previous code * Add Magnifier effect * to Goods-imginfo-bimg-box; */$ ("Head"). Append (' <link rel= "stylesheet"
 Type= "Text/css" href= "Themes/od/css/mag.css" ">");
 picbox=$ ('. Goods-imginfo-bimg-box ');
 Picbox.css (' position ', ' relative ');
 Picbox.append (' <div class= ' Mag-sbox "></div>");
 Picbox.append (' <div class= ' Mag-box "></div>");
 msbox=$ ('. Mag-sbox ');
 mbox=$ ('. Mag-box '); bs=;
 Multiple Msbox.css ({width:picBox.width ()/+ ' px ', height:picBox.height ()/+ ' px '});
 Mbox.css ({' backgroundsize ': bs*+ '% '}); Picbox.mousemove (function (e) {mbox.css (' BackgroundImage ', $ (this). CSS (' backgroundimage ');//give large picture background if (' Display ')!= ' block ' {//mouse put up, the scope box and effectBox Msbox.show ();
  } if (Mbox.css (' Display ')!= ' block ') {mbox.show ();
  /* Mouse Mobile/Xleft=e.pagex-picbox.offset () left-msbox.width ()/;
  if (xleft<) {xleft=;
  }else if (Xleft>picbox.width ()-msbox.width ()) {xleft=picbox.width ()-msbox.width ();
  } xtop=e.pagey-picbox.offset (). Top-msbox.height ()/;
  if (xtop<) {xtop=;
  }else if (Xtop>picbox.height ()-msbox.height ()) {xtop=picbox.height ()-msbox.height ();
  } msbox.css ({' Left ': xleft+ ' px ', ' top ': xtop+ ' px '});
 Mbox.css ({' backgroundposition ':-bs*xleft+ ' px ' +-bs*xtop+ ' px '});
 });
  Picbox.mouseout (function () {msbox.hide ();
 Mbox.hide (); });

The above code is based on jquery to achieve Magnifier effect, I hope you like.