网上找到的一个不错的插件叫Zoomy 是一个非常容易实现的jQuery插件，它可以实现图像放大的功能。除了缩略图以外还需要一张原始尺寸的图片。这边焦点部分使用了CSS3技术，如果是IE用户可能看到焦点形状不是圆形，另外图片还有个加载效果。
浏览地址： http://www.sunflowamedia.com/web-design/examples/jquery/20110125/
Step1. 创建HTML
<p id="zoomy"><a class="zoom" href="images/lucyZoom.jpg" mce_href="images/lucyZoom.jpg"><img src="images/lucyTn.jpg" mce_src="images/lucyTn.jpg" /></a></p>
Step2. 创建CSS
#zoomy { width: 500px; margin: 0 auto; border: 1px solid #2d353f; padding: 5px; } .zoomy{ position: absolute; display: none; background-repeat: no-repeat; -webkit-box-shadow: 3px 3px 10px #000; -moz-box-shadow: 3px 3px 10px #000; border: 0; cursor: url(../images/blank.gif), move; line-height: 100px; text-align: center; background-image: url(../images/loading.gif); background-position: center; background-color: #fff; z-index: 1000; } .zoomy span{ display: block; margin: 10px auto; background:-webkit-gradient(linear, 0% 100%, 0% 0%, color-stop(0.50, rgba(255, 255, 255, 0)), to( rgba(255, 255, 255, .5))); background:-moz-linear-gradient(bottom center, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .5) 100%); } .zoomy img{ opacity: 0; filter: alpha(opacity=0); } .zoomy a{ color: #333; text-decoration: none; } .broke a{ display: block; height: 100%; width: 100%; } #brokeZoomy{ display: block; position: absolute; width: 30px; height: 30px; top: 0px; left: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; background: #fff url(../images/broke.gif) center no-repeat; }
Step3. 插入jQuery和脚本包
$(function(){ $('.zoom').zoomy(); });
脚本包和插件:
script type="text/javascript" src="http://www.baijs.nl/js/jquery-1.4.2.min.js"></script> <mce:script type="text/javascript" src="js/jquery.zoomy0.5.min.js" mce_src="js/jquery.zoomy0.5.min.js"></mce:script>
点击下载
