利用jqueryzoom實現圖片放大鏡效果

標籤：style   blog   class   code   java   tar   

• 在你的頁面中包含 jqzoom.css
• Html代碼  
  1. <link rel="stylesheet" href="your_path/jqzoom.css" type="text/css" media="screen">  
   
• 包含 jQzoom 和 jQuery JS 代碼：
• Html代碼  
  1. <script type="text/javascript" src="your_path/jquery.js"></script>  
  2. <script type="text/javascript" src="your_path/jquery.jqzoom.js"></script>  
• 現在建立一個放圖片的容器（最好是 DIV），並給 class  賦值為 jqzoom ，然後給每 張圖片設定一個jqimg 屬性，它的值為大圖的地址。
• Html代碼  
  1. <div class="jqzoom"><img src="images/shoe4_small.jpg" alt="shoe" jqimg="images/shoe4_big.jpg"></div>  
   
• 當頁面匯入的時候，載入 jQZoom 外掛程式。在head之前寫入下面JS
• Js代碼  
  1. $(document).ready(function(){ $(".jqzoom").jqueryzoom(); });  
   
• 好了基本設定好了，當然你也可以自己做些簡單的設定：
• Js代碼  
  1. $(document).ready(function(){  
  2.     $(".jqzoom").jqueryzoom({  
  3.         xzoom: 300, //設定放大 DIV 長度（預設為 200）  
  4.         yzoom: 300, //設定放大 DIV 高度（預設為 200）  
  5.         offset: 10, //設定放大 DIV 位移（預設為 10）  
  6.         position: "right", //設定放大 DIV 的位置（預設為右邊）  
  7.          preload:1,  
  8.         lens:1  
  9.     });  
  10. });  
   這個jquery.js,jquery.jqzoom.js可以在網上下，到處都是。這裡就不附件了。