This is a show called MagicZoom effect free product, the official website: http://www.magictoolbox.com , which have more effect Products, than a show off, you can go directly to Tao Tao. but! The following is to say the focus of this article, please note that children's shoes, because MagicZoom is free, so there will be prompted to upgrade the following text "Please upgrade to full version of Magic Thumb?" In the larger picture, it goes without saying, of course, it is an eyesore! To get rid of these lines of text again but would pay slightly ~! Station can provide the prompt text to remove JS, click here to download mz-packed.js, this free version of JS JS instead of on it.
JS using this particular method is very simple, as follows:
<a href="pic_big.jpg" class="MagicZoom"><img src="pic_small.jpg"/></a> JS is available for download, CSS you can follow the need to write or direct reference to the style of this example, as follows:
/* Copyright 2008 MagicToolBox.com. To use this code on your own site, visit http://magictoolbox.com */
/* CSS class for zoomed area */
.MagicZoomBigImageCont {
border:1px solid #91b817;
}
.MagicZoomMain {
text-align:center !important;
width:92px;
}
.MagicZoomMain div {
padding: 0px !important;
}
/* Header look and feel CSS class */
/* header is shown if "title" attribute is present in the <A> tag */
.MagicZoomHeader {
font:10px Tahoma, Verdana, Arial, sans-serif;
color:#fff;
background:#91b817;
text-align:center !important;
}
/* CSS class for small looking glass square under mouse */
.MagicZoomPup {
border:1px solid #aaa;
background:#ffffff;
}
/* CSS style for loading animation box */
.MagicZoomLoading {
text-align:center;
background:#ffffff;
color:#444;
border:1px solid #ccc;
opacity:0.8;
padding:3px 3px 3px 3px !important;
display:none; /* do not edit this line please */
}
/* CSS style for gif image in the loading animation box */
.MagicZoomLoading img {
padding-top:3px !important;
}
Reproduced in: https: //my.oschina.net/weisenz/blog/200638