介紹一個十分好用的JQUERY圖片放大鏡插件

介紹一個十分好用的JQUERY圖片放大鏡插件,在很多電子商務(wù)網(wǎng)站中,有時在看小圖時,往往想再看這個貨品的大圖,

傳統(tǒng)的另外打開一張大圖的話,不大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是要出現(xiàn)在放大鏡里的文字標題

然后在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

posted on 2009-12-24 23:45 jackyrong的世界 閱讀(...) 評論(...) 編輯 收藏

轉(zhuǎn)載于:https://www.cnblogs.com/jackyrong/archive/2009/12/24/1631761.html

總結(jié)

以上是生活随笔為你收集整理的介绍一个十分好用的JQUERY图片放大镜插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。