jQuery 圖片放大鏡插件下載與使用說(shuō)明

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

傳統(tǒng)的另外打開一張大圖的話,不大COOL,所以找到了這個(gè)插件,

插件下載地址:

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

簡(jiǎn)單介紹下,在下載后,

要準(zhǔn)備一張小圖和一張清晰點(diǎn)的大圖,然后在頁(yè)面中引入JQUERY和這個(gè)插件的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>

然后再引入一個(gè)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"這個(gè)小圖中,那個(gè)title是要出現(xiàn)在放大鏡里的文字標(biāo)題

然后在JS中：

這里就是放大鏡的效果了，具體的文檔和例子請(qǐng)參考

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

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)