jQzoom圖片放大插件

 

 

使用方法

1.引用 jQZoom插件的樣式：

 
XML/HTML代碼

    <link rel=“stylesheet” href=“你的路徑/jqzoom.css” type=“text/css” media=“screen”>  

2.引用JQ腳本和jQZoom插件腳本：

 
XML/HTML代碼

    <script src=“你的路徑/jquery.js” type=“text/javascript”></script> 
    <script src=“你的路徑/jquery.jqzoom.js” type=“text/javascript”></script> 

3.頁面中要用放大鏡的圖片：

注意這裏的樣式是：class=”jqzoom”，還有大圖的屬性：jqimg=”p_w_picpaths/shoe4_big.jpg”
XML/HTML代碼

    <p class=“jqzoom”><img src=“p_w_picpaths/shoe4_small.jpg” alt=“shoe” jqimg=“p_w_picpaths/shoe4_big.jpg” /></p> 

4.頁面加載完成後執行

 
JavaScript代碼

    $(document).ready(function(){  
    $(“.jqzoom”).jqueryzoom();  
    }); 

或者

 
JavaScript代碼

    $(document).ready(function(){  
    $(“.jqzoom”).jqueryzoom({  
    xzoom: 300, //放大的寬度(默認是200)  
    yzoom: 300, //放大的高度度(默認是200)  
    offset: 40, //縮放分區默認偏移（偏移值默認爲10）  
    position: “right”, //縮放分區位置（默認位置值是“正確“）
    preload:1 // by default preload of big p_w_picpaths is 1  
    lens:1 // 默認情況下，鏡頭一
    });  
    });