在網上找了些實現放大鏡效果的方法，感覺這個方法符合我的要求就摘過來了，非原創

在一些電子商務或商品展示網上，為了更好的顯示商品，一般都會添加放大鏡的效果。

如圖：（當把鼠標放到小圖片上，右邊會自動的出現放大圖）

好了，我們直接來實現。（前提：已下載jquery.js）

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

2、建立Web網站，按照下面的結構組織好文件

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

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

<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> 復制代碼

?

4、添加圖片顯示代碼

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

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

5、添加腳本，設置放大鏡效果

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

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

OK，測試運行，怎么樣，效果出來了吧！

?

?

轉載于:https://www.cnblogs.com/Kiss920Zz/archive/2011/12/20/2294209.html

總結

以上是生活随笔為你收集整理的JQuery放大镜效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。