Jquery 实现放大镜效果 jqzoom插件

 先看图片：

 

 

 

 

 代码：

 

 Css樣式引用:

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

javascript引用:

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

客戶端代碼:

<div class="jqzoom"><img src="Images/shoe1_small.jpg" alt="shoe" jqimg="Images/shoe1_big.jpg" /></div>

javascript代碼:

$(document).ready(function() {
//$(".jqzoom").jqueryzoom();不帶任何設置的應用

$(".jqzoom").jqueryzoom({
xzoom: 300, //放大圖片之寬(默認是200)
yzoom: 300, //放大圖片之高(默認是200)
offset: 20, //與原來圖片距離(默認是10)
position: "right", //相對原來圖片的位置(默認是right)
preload: 1, // 默認是1
lens: 1 //是否顯示小圖片放大鏡頭 默認是1
});

})

 

  来自：http://www.cnblogs.com/davidzhou/archive/2009/08/26/1554188.html