A good plug-in found on the internet is zoomy.
Is a very easy-to-implement jquery plug-in, which can implement the image amplification function. In addition to thumbnails, you also need an image of the original size. The focus part here uses the css3 technology. If it is an IE user, you may see that the focus shape is not circular, and the image has a loading effect.
Browsing address:
Http://www.sunflowamedia.com/web-design/examples/jquery/20110125/
Step 1. Create HTML
<P id = "zoomy"> <a class = "zoom" href = "images/lucyzoom.jpg" mce_href = "images/lucyzoom.jpg"> </a> </P>
Step 2. Create CSS
# Zoomy {<br/> width: 500px; <br/> margin: 0 auto; <br/> border: 1px solid # 2d1_f; <br/> padding: 5px; <br/>}< br/>. zoomy {<br/> position: absolute; <br/> display: none; <br/> background-repeat: No-Repeat; <br/>-WebKit-box-Shadow: 3px 3px 10px #000; <br/>-moz-box-Shadow: 3px 3px 10px #000; <br/> border: 0; <br/> cursor: URL (.. /images/blank.gif), move; <br/> line-Height: 100px; <br/> text-align: center; <br/> background-image: URL (.. /images/loading.gif); <br/> background-position: center; <br/> background-color: # FFF; <br/> Z-index: 1000; <br/>}< br/>. zoomy span {<br/> display: block; <br/> margin: 10px auto; <br/> Background:-WebKit-gradient (linear, 0% 100%, 0% 0%, color-stop (0.50, rgba (255,255,255, 0), to (rgba (255,255,255 ,. (5); <br/> Background:-moz-linear-gradient (bottom center, rgba (255,255,255, 0) 50%, rgba (255,255,255 ,. 5) 100%); <br/>}< br/>. zoomy IMG {<br/> opacity: 0; <br/> filter: alpha (opacity = 0); <br/>}< br/>. zoomy A {<br/> color: #333; <br/> text-Decoration: none; <br/>}< br/>. broke a {<br/> display: block; <br/> Height: 100%; <br/> width: 100%; <br/>}< br/> # brokezoomy {<br/> display: block; <br/> position: absolute; <br/> width: 30px; <br/> Height: 30px; <br/> top: 0px; <br/> left: 0px; <br/>-WebKit-border-radius: 0px; <br/>-moz-border-radius: 0px; <br/> Background: # fff URL (.. /images/broke.gif) center no-Repeat; <br/>}
Step3. insert jquery and script packages
$ (Function () {<br/>$ ('. Zoom'). Zoomy (); <br/> });
Script package and plug-in:
Script Type = "text/JavaScript" src = "http://www.baijs.nl/js/jquery-1.4.2.min.js"> </SCRIPT> <br/> <MCE: Script Type = "text/JavaScript" src = "JS/jquery. zoomy0.5.min. JS "mce_src =" JS/jquery. zoomy0.5.min. JS "> </MCE: SCRIPT>
Click to download