Slice
Style:
<Style type = "text/CSS">
. Jqzoom
{
Float : Left ;
Border : None ;
Position : Relative ;
Padding : 0px ;
Cursor : Pointer ;
Margin : 2px 6px ;
Display : Block ;
}
. Zoomdiv
{
Z-Index : 100 ;
Position : Absolute ;
Top : 0px ;
Left : 0px ;
Width : 300px ;
Height : 300px ;
Background : # Ffffff ;
Border : 1px solid # cccccc ;
Display : None ;
Text-align : Center ;
Overflow : Hidden ;
}
. Jqzoompup
{
Z-Index : 10 ;
Visibility : Hidden ;
Position : Absolute ;
Top : 0px ;
Left : 0px ;
Width : 20px ;
Height : 20px ;
Border : 1px solid # aaa ;
Background : # Ffffff URL (../images/zoom.gif) 50% top no-repeat ;
Opacity : 0.5 ;
-Moz-Opacity : 0.5 ;
-Khtml-Opacity : 0.5 ;
Filter : Alpha (opacity = 50) ;
}
</Style>
2. Introduce the JS Library
<SCRIPT type = "text/JavaScript" src = "JS/jquery-1.3.2.min.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript">
$ (Document). Ready (function () {$ (". jqzoom"). jqueryzoom ({xzoom: 300, yzoom: 300 });});
</SCRIPT>
3. TestedCode:
<! -- Test the magnifier effect -->
<Div style = "height: 310px; text-align: center;">
<SPAN class = "jqzoom">
</span>
</Div>
