介紹一個十分好用的JQUERY圖片放大鏡外掛程式

介紹一個十分好用的JQUERY圖片放大鏡外掛程式,在很多電子商務網站中,有時在看小圖時,往往想再看這個貨品的大圖,

傳統的另外開啟一張大圖的話,不大COOL,所以找到了這個外掛程式,

外掛程式下載地址:

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

 

簡單介紹下,在下載後,

要準備一張小圖和一張清晰點的大圖,然後在頁面中引入JQUERY和這個外掛程式的JS

<script src="../js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="../js/jqzoom.pack.1.0.1.js" type="text/javascript"></script>

然後再引入一個CSS

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

接著是兩張大圖和小圖

<a href="kawasakigreen.jpg" class="jqzoom" style="" title="kawasaki">
  <img src="kawasakigreen_small.jpg" border="0" style="border: 1px solid #666;"  title="kawasakigreen"></a>

這裡注意的是一張大圖,一張小圖,並且"kawasakigreen_small.jpg"這個小圖中,那個title是要出現在放大鏡裡的文字標題

然後在JS中

 

<script type="text/javascript">

$(function() {

  var options3 =
            {
                zoomWidth: 200,
                zoomHeight: 200,
                xOffset: 20,
                title: false,
                lens:false

            }

 $(".jqzoom").jqzoom(options3);
});
</script>

 

這裡就是放大鏡的效果了，具體的文檔和例子請參考

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