jQZoom 使用說明

jQZoom 使用說明

下面介紹下簡單使用：

1. 在你的頁面中包含 jqzoom.css

<link rel="stylesheet" href="your_path/jqzoom.css" type="text/css" media="screen">

2. 包含 jQzoom 和 jQuery JS 代碼：

<script type="text/javascript" src="your_path/jquery.js"></script>
<script type="text/javascript" src="your_path/jquery.jqzoom.js"></script>

3. 現在創建一個放圖片的容器（最好是 DIV），並給 class 賦值爲 jqzoom，然後給每張圖片設置一個 jqimg 屬性，它的值爲大圖的地址。

<div class="jqzoom"><img src="images/shoe4_small.jpg" alt="shoe" jqimg="images/shoe4_big.jpg"></div>

4. 當頁面導入的時候，載入 jQZoom 插件。

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

好了基本設置好了，當然你也可以自己做些簡單的設置：

$(document).ready(function(){
    $(".jqzoom").jqueryzoom({
        xzoom: 300, //設置放大 DIV 長度（默認爲 200）
        yzoom: 300, //設置放大 DIV 高度（默認爲 200）
        offset: 10, //設置放大 DIV 偏移（默認爲 10）
        position: "right", //設置放大 DIV 的位置（默認爲右邊）
         preload:1,
        lens:1
    });
});