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,表示放大框是否一直顯示