Based on jquery imitation Taobao products picture Magnifier code sharing _jquery

This article mainly introduces the jquery Taobao product picture Magnifier effect, mouse click pictures, image amplification, especially suitable for picture details show, interested in the small partners can refer to.
(1) HTML code:

<div class= "box" > <div class= "tb-booth tb-pic tb-s310" > <a href= "images/01.jpg" > </a> </div> <ul class= "Tb-thum" 
      B "id=" Thumblist "> <li class=" tb-selected "> <div class=" tb-pic tb-s40 "> <a href=" # "> </a></div> </li& 
   Gt <li> <div class= "Tb-pic tb-s40" > <a href= "#" > </a></div> </li> <li> <div class=" Tb-pic Tb-s40 "> <a href=" # "> </div> </li> <li> <div class= "Tb-pic tb-s40" > <a href= "#" > </a></div> </li> &LT;LI&G 
    T <div class= "Tb-pic tb-s40" > <a href= "#" > </a></div> </li> </ul> </div>

(2) CSS code:

Html{overflow-y:scroll;} 
body{margin:0 font:12px "\5b8b\4f53", San-serif;background: #ffffff;} 
div,ul,li{padding:0; margin:0;} 
Li{list-style-type:none;} 
 
img{vertical-align:top;border:0;} 
* Box/* box{width:310px;margin:100px auto; 
. Tb-pic A{display:table-cell;text-align:center;vertical-align:middle;} 
. tb-pic a img{vertical-align:middle; 
. Tb-pic A{*display:block;*font-family:arial;*line-height:1;} 
. tb-thumb{margin:10px 0 0;overflow:hidden; . Tb-thumb Li{background:none Repeat scroll 0 0 transparent;float:left;height:42px;margin:0 
6px 0 0;overflow:hidden;padding:1px;} 
. tb-s310,. tb-s310 a{height:310px;width:310px; 
. tb-s310,. tb-s310 img{max-height:310px;max-width:310px; 
. tb-s310 a{*font-size:271px;} 
. Tb-s40 a{*font-size:35px;} 
. Tb-s40,. Tb-s40 a{height:40px;width:40px; 
. tb-booth{border:1px solid #CDCDCD;p osition:relative;z-index:1;} 
. tb-thumb. Tb-selected{background:none Repeat scroll 0 0 #C30008; height:40px;padding:2px; . tb-thumb. tb-selected div{background-Color: #FFFFFF; border:medium none;} 
. tb-thumb Li div{border:1px solid #CDCDCD;} Div.zoomdiv{z-index:999;position:absolute;top:0px;left:0px;width:200px;height:200px;background: #ffffff; border 
: 1px solid #CCCCCC;d Isplay:none;text-align:center;overflow:hidden;} Div.zoommask{position:absolute;background:url ("Images/mask.png") repeat scroll 0 0 transparent;cursor:move;z-index  : 1;}

This example describes the jquery Taobao product picture Magnifier effect. Share to everyone for your reference. Specifically as follows:
This is based on the jquery Taobao product picture Magnifier effect Code, the implementation process is very simple.
Run Effect chart:-----------------------------View effect source Download----------------------------

Tip: If you are not running properly in your browser, you can try switching browsing mode.
For everyone to share the jquery Taobao product picture Magnifier effect code as follows