jQuery插件：圖片放大鏡——jQuery Zoom

這是一款非常不錯的給圖片添加放大鏡效果，可以應用在諸如zen cart、magento電子商場之類的開源項目上。如果想看它的效果，你可以直接訪問：

http://www.mind-projects.it/projects/jqzoom/demos.php

覺得不錯就下載一個玩玩吧！jQuery出來的插件都是非常容易使用的。也可以當做學習的示例。

【如何安裝】

① 先在網頁中包含jQuery文件，然後再包含jQZoom的文件，如下：

<script type='text/javascript' src='js/jquery-1.4.2.js'></script> 
<script type='text/javascript' src='js/jquery.jqzoom-1.0.1.js'></script> 

② 然後再將jqzoom.css添加到網頁中：

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

【如何使用】

使用是很簡單的，先指定一個<a>標籤，指向一個大的圖片，裏面包含一個小圖片：

<a href="images/BIGIMAGE.JPG" class="MYCLASS"  title="MYTITLE"> 
	<img src="images/SMALLIMAGE.JPG" title="IMAGE TITLE"> 
</a> 

■ SMALLIMAGE.JPG：這個是默認用戶看見的圖片，也就是之後被放大的圖片；

■ BIGIMAGE.JPG：放大鏡所看到的圖片；

■ MYCLASS：Represents the anchor class,that would be used to instantiate the jQZoom script to all the elements matching this class(you can use an ID as well).用來標識這個<a>標籤要應用放大鏡功能，之後我們可以通過class選擇器來選擇所有的要應用jQZoom 的<a>標籤。

■ MYTITLE/IMAGE TITLE：這些文本它們會被顯示在放大鏡窗口上。

準備工作做完了，現在可以通過下面的簡單代碼來調用jQZoom：

$(document).ready(function(){ 
    $('.MYCLASS).jqzoom(); 
}); 

這樣只是使用jQZoom的標籤模式，事實上它有更多的參數可以設置，以獲得更多的效果，看下面的示例：

$(document).ready(function(){ 
    var options = { 
        zoomWidth: 300, 
        zoomHeight: 250, 
        xOffset: 10, 
        yOffset: 0, 
        position: "right" //and MORE OPTIONS 
	}; 
    $('.MYCLASS).jqzoom(options); 
}); 

原文http://blog.csdn.net/xinhaozheng/article/details/4085644