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