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
    });
});

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章