網購網站常用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>

 

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