jqZoom插件

  一直对图片缩放饶有兴趣的我今日一个很投机的机会研究了一把

  参考官方网站：http://www.mind-projects.it/projects/jqzoom/index.php

 参考demo文献：http://www.mind-projects.it/projects/jqzoom/index.php#examples网站下方download一栏

 在官方文档下载的demo文献中，有详尽的例子，这里主要解释运用以及options(选项)的含义

$(document).ready(function() {
            $('.jqzoom').jqzoom({
                zoomType: 'standard',
                lens:true,
                zoomWidth: 300,
                zoomHeight:450,
                xOffset:90,
                yOffset:30,
                preloadImages: true,
                alwaysOn:false

            });

        });

此处为引用正文

html如下：

<div class="clearfix" id="content" style="margin-top:100px;margin-left:350px; height:500px;width:500px;" >
    <div class="clearfix">
        <a href="../images/triumph_big1.jpg" class="jqzoom" rel='gal1'  title="triumph" >
            <img src="../images/triumph_small1.jpg"  title="triumph"  style="border: 4px solid #666;">
        </a>
           </div>
    <br/>
    <div class="clearfix" >
        <ul id="thumblist" class="clearfix" >
            <li><a class="zoomThumbActive" href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: '../images/triumph_small1.jpg',largeimage: '../images/triumph_big1.jpg'}"><img src='../images/thumbs/triumph_thumb1.jpg'></a></li>
            <li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: '../images/triumph_small2.jpg',largeimage: '../images/triumph_big2.jpg'}"><img src='../images/thumbs/triumph_thumb2.jpg'></a></li>
            <li><a  href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: '../images/triumph_small3.jpg',largeimage: '../images/triumph_big3.jpg'}"><img src='../images/thumbs/triumph_thumb3.jpg'></a></li>
        </ul>
    </div>
</div>

此处官方文档有详尽资料，这里也是引用官方资料文献

属性含义如下：

zoomWidth，表示放大框的宽
  zoomHeight ，表示放大框的高
  xOffset,表示离显示展示中等图片的x距离
 yOffset，表示离显示中等图片的Y距离
 position,表示显示的放大框在浏览器的center，还是left,还是right
 lens,表示显示在中等图片的缩放位置是否显示，默认为true
 alwaysOn,表示放大框是否一直显示

本文转自蓬莱仙羽51CTO博客，原文链接：http://blog.51cto.com/dingxiaowei/1366600，如需转载请自行联系原作者