jquery Magnifier Effect

Modify the front end of the site, need a magnifying glass effect, try to write a

The effect is as follows:

Picture big box Initial style:

1 <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 an enlarged area box and a magnifying effect box

1 picbox=$ ('. Goods-imginfo-bimg-box '); 2 picbox.css (' position ', ' relative '); 3 picbox.append (' <div class= ' mag-sbox ' ></div> '); 4 picbox.append (' <div class= ' mag-box ' ></div> ');

Add Style sheet

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

Style

1 @CHARSET "UTF-8";2 . Mag-sbox{position:Absolute;Border:1px solid #fff;Background-color:Rgba (255,255,255,0.5);cursor:crosshair;Z-index:9;Display:None;}3 . Mag-box{position:Absolute; Left:100%;Top:0;Margin-left:20px;Border:1px solid #c8c8c8;width:100%;Height:100%;4 background-size:cover;Background-color:#fff;Z-index:9;Display:None;5}

Js

1 /*2 * Magnifying Glass effect3 * Do not change the previous code4 * Add Magnifier effect5 * to Goods-imginfo-bimg-box;6      * */7$ ("Head"). Append (' <link rel= "stylesheet" type= "Text/css" href= "Themes/od/css/mag.css" > ");8picbox=$ ('. Goods-imginfo-bimg-box '));9Picbox.css (' position ', ' relative ');TenPicbox.append (' <div class= ' mag-sbox ' ></div> '); OnePicbox.append (' <div class= ' mag-box ' ></div> '); Amsbox=$ ('. Mag-sbox ')); -mbox=$ ('. Mag-box ')); -bs=2;//Multiples theMsbox.css ({width:picBox.width ()/2+ ' px ', height:picBox.height ()/2+ ' px '}); -Mbox.css ({' backgroundsize ': bs*100+ '% ')}); -Picbox.mousemove (function(e) { -Mbox.css (' BackgroundImage ', $ ( This). CSS (' backgroundimage '));//give big picture background +         if(Msbox.css (' display ')! = ' block ') {//With the mouse on, the Scope box and effect box appear - msbox.show (); +         } A         if(Mbox.css (' display ')! = ' block '){ at mbox.show (); -         } -         /*Mouse Movement*/ -Xleft=e.pagex-picbox.offset (). Left-msbox.width ()/2; -         if(xleft<0){ -Xleft=0; in}Else if(Xleft>picbox.width ()-msbox.width ()) { -Xleft=picbox.width ()-msbox.width (); to         } +Xtop=e.pagey-picbox.offset (). Top-msbox.height ()/2; -         if(xtop<0){ theXtop=0; *}Else if(Xtop>picbox.height ()-msbox.height ()) { $Xtop=picbox.height ()-msbox.height ();Panax Notoginseng         } -Msbox.css ({' Left ': xleft+ ' px ', ' top ': xtop+ ' px '}); theMbox.css ({' backgroundposition ':-bs*xleft+ ' px ' +-bs*xtop+ ' px '}); +     }); APicbox.mouseout (function(){ the msbox.hide (); + mbox.hide (); -});

jquery Magnifier Effect