在網(wǎng)上找了些實(shí)現(xiàn)放大鏡效果的方法，感覺(jué)這個(gè)方法符合我的要求就摘過(guò)來(lái)了，非原創(chuàng)

在一些電子商務(wù)或商品展示網(wǎng)上，為了更好的顯示商品，一般都會(huì)添加放大鏡的效果。

如圖：（當(dāng)把鼠標(biāo)放到小圖片上，右邊會(huì)自動(dòng)的出現(xiàn)放大圖）

好了，我們直接來(lái)實(shí)現(xiàn)。（前提：已下載jquery.js）

1、下載jqzoom插件，取出里面的jquery.jqzoom.js和jqzoom.css

2、建立Web網(wǎng)站，按照下面的結(jié)構(gòu)組織好文件

注：room_big.jpg和room_small.jpg是事先準(zhǔn)備好的兩張圖片，一大一小

3、在頁(yè)面中添加腳本和樣式的引用

<head?runat="server">
????<title>放大鏡效果</title>
????<link?href="css/jqzoom.css"?rel="stylesheet"?type="text/css"?media="screen"?/>
????<script?type="text/javascript"?src="js/jquery.js"></script>
????<script?type="text/javascript"?src="js/jquery.jqzoom.js"></script>
</head> 復(fù)制代碼

?

4、添加圖片顯示代碼

<div>
??? 家裝圖欣賞(請(qǐng)把鼠標(biāo)放到圖片上)
??? <div?class="jqzoom">
??????? <img?src="images/room_small.jpg"?alt="房間演示"?jqimg="images/room_big.jpg"?/>
??? </div>
</div> 復(fù)制代碼

注：div指明類樣式"jqzoom"，img標(biāo)記中的jqimg屬性是指放大圖為哪張圖片

5、添加腳本，設(shè)置放大鏡效果

<script?type="text/javascript">
????????$(document).ready(function(){
????????????$(".jqzoom").jqueryzoom({
????????????????xzoom:300,??//?放大圖的寬
????????????????yzoom:300,??//?放大圖的高
????????????????offset:30,???//?放大圖距離原圖的位置
????????????????position:'right'??//?放大圖在原圖的右邊(默認(rèn)為right)
????????????});
????????});
</script> 復(fù)制代碼運(yùn)行代碼

注：$(".jqzoom")是獲得本頁(yè)面中所有類樣式為jqzoom的元素，jqueryzoom方法是進(jìn)行放大效果設(shè)置?
在上面我們給出了一些選項(xiàng)的設(shè)置，也可以進(jìn)行默認(rèn)方式的調(diào)用，如：$(".jqzoom").jqueryzoom();

OK，測(cè)試運(yùn)行，怎么樣，效果出來(lái)了吧！

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/Kiss920Zz/archive/2011/12/20/2294209.html

總結(jié)

以上是生活随笔為你收集整理的JQuery放大镜效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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