介绍一个十分好用的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" class="jqzoom" 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