Jquery的Jqzoom组件放大镜效果
Jquery组件很多，今天写下Jqzoom组件的用法，首先看下应用Jquery组件后的jquery放大镜效果：
Jqzoom组件放大镜效果的HTML代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jquery组件jqzoom放大镜效果</title><script src="js/jquery-1.4.2.min.js" type="text/javascript"></script><script src="js/jqzoom.pack.1.0.1.js" type="text/javascript"></script><style type"text/css"> div#content{margin-top:100px;margin-left:100px;} /*class jqzoom 的图片title*/ div.jqZoomTitle { z-index:5000; text-align:center; font:normal 11px Tahoma; height:16px; padding-top:2px; position:absolute; top: 0px; left: 0px; width: 100%; color: #FFF; background: #999; } /*鼠标移动到小图上所选区域*/ .jqZoomPup { overflow:hidden; background-color: #FFF; -moz-opacity:0.6; opacity: 0.6; filter: alpha(opacity = 60); z-index:10; border-color:#c4c4c4; border-style: solid; cursor:crosshair; } /*class jqzoom 的图片边框*/ .jqZoomPup img { border: 0px; } /*放大如有延迟,出现的等待图片样式*/ .preload{ -moz-opacity:0.8; opacity: 0.8; filter: alpha(opacity = 80); color: #333; font:normal 12px Tahoma; text-decoration: none; border: 1px solid #000; background-color: white; padding: 8px; text-align:center; background-image: url(img/load.gif); background-repeat: no-repeat; background-position: 43px 30px; width:90px; *width:100px; height:43px; *height:55px; z-index:10; position:absolute; top:3px; left:3px; } /*class jqzoom 的边框*/ .jqZoomWindow { border: 1px solid #999; background-color: #FFF; }</style><script type="text/javascript"> $(function() { $(".jqzoom").jqzoom(); });</script></head><body> <div id="content"> <a href="img/demo.jpg" title="摩托车"> <img src="img/demo_small.jpg" title="kawasakigreen" style="border: 1px solid #777;"> </a> </div></body></html>其中jquery-1.4.2.min.js为jquery代码，jqzoom.pack.1.0.1.js为放大镜效果jqzoom组件的js代码，都必须导入。
更多放大镜效果请点击http://www.mind-projects.it/projects/jqzoom/demos.php
附件jqzoom_demo.rar为jquery放大镜效果详细代码。