自己写的jQuery放大镜插件效果(采用一张大图和一张小图片的思路)

1 <div class="test"><!--整个放大效果的最外区域.-->
2     <div class="testOri"><img  width="400px" height="250px" src="../img/small.jpg"  alt="原图"/></div><!--原始区域,为了更好地兼容各种浏览器,请将图片的宽和高注明-->
3     <div class="testZoom"><img width="1440px" height="900px" src="../img/big.jpg"  alt="放大图"/></div><!--放大区域,为了更好地兼容各种浏览器,请将图片的宽和高注明-->
4 </div>

 1 ; (function ($) {
 2             $.fn.gysFdj = function (options) {
 3                 var defaults = {
 4                     cameraW: 100, //镜头宽度
 5                     cameraH: 100, //镜头高度
 6                     cameraBjColor: "#000", //镜头背景色
 7                     zoomIndex: 10, //放大框div的层级
 8                     cameraOpacity: 0.6, //镜头透明度
 9                     zoomPos: 10, //放大框距离源框的位置
10                     cameraIndex: 10//镜头的层级
11                 }
12                 var opt = $.extend({}, defaults, options); //合并参数          
13 
14                 if (!opt.ori) { alert("你没有指定源图框"); return; }
15                 if (!opt.zoom) { alert("你没有指定放大框"); return; }
16                 var obj = $(this); //当前最大框对象
17                 if(obj.css("position")=="static") obj.css("position","relative");
18 
19                 var objOriDiv = $(opt.ori, obj); //源div 
20                 var objOriDivOffset = objOriDiv.offset();
21                 var objOriDivLeft = objOriDivOffset.left; //源框的left
22                 var objOriDivTop = objOriDivOffset.top; //源框的top
23                 var objZoomDiv = $(opt.zoom, obj); //放大的div框
24                 var objOriImg = $("img", objOriDiv); //源图框               
25                 var objZoomImg = $("img", objZoomDiv); //放大框
26                 var objOriImgW = objOriImg.width();
27                 var objOriImgH = objOriImg.height();
28                 objOriDiv.width(objOriImgW).height(objOriImgH);
29                 obj.width(objOriImgW).height(objOriImgH);
30 
31                 var objOriDivW = objOriDiv.width();
32                 var objOriDivH = objOriDiv.height();
33                 var cameraMaxLeft = objOriDivW - opt.cameraW; //镜头的最大left
34                 var cameraMaxTop = objOriDivH - opt.cameraH; //镜头的做大top
35 
36                 var cameraCSs = { width: opt.cameraW, height: opt.cameraH, "background-color": opt.cameraBjColor, opacity: opt.cameraOpacity, filter: "alpha(opacity=" + opt.cameraOpacity * 100 + ")", "position": "absolute", display: "none",cursor: "crosshair", "z-index": opt.cameraIndex }; //镜头css               
37                 obj.append("<div class=‘camera‘></div>"); //填充镜头
38                 var objCamera = $(".camera", obj);
39                 objCamera.css(cameraCSs); //添加样式                
40                 
41                 var zoom = objZoomImg.width() / objOriImgW; //放大倍数
42                 objZoomDiv.width(opt.cameraW * zoom).height(opt.cameraH * zoom).css({ position: "absolute", left: (objOriDivW + opt.zoomPos) + "px", top: "0px", overflow: "hidden", "z-index": opt.zoomIndex, display: "none" }); //设置放大的div框
43 
44                 var nowLeft = 0, nowTop = 0;
45                 objOriDiv.on("mouseover", function () {
46                     objCamera = $(".camera", obj);
47                     objOriDiv = $(opt.ori, obj);
48                     objOriImg = $("img", objOriDiv); //源图框
49                     objZoomDiv = $(opt.zoom, obj);
50                     objZoomImg = $("img", objZoomDiv);
51                     objOriDivOffset = objOriDiv.offset();
52                     objOriDivLeft = objOriDivOffset.left; //源框的left
53                     objOriDivTop = objOriDivOffset.top; //源框的top
54                     objCamera.show(); //显示镜头,
55                     objZoomDiv.show(); //显示放大框                   
56                     zoom = objZoomImg.width() / objOriImg.width(); //放大倍数 
57 
58                     $(document).on("mousemove", function (e) {
59                         nowLeft = e.clientX - objOriDivLeft - opt.cameraW / 2+ $(document).scrollLeft();
60                         nowTop = e.clientY-objOriDivTop - opt.cameraH / 2 + $(document).scrollTop();
61 
62                         if (nowLeft <= 0)   nowLeft = 0;                       
63                         else if (nowLeft >= cameraMaxLeft)   nowLeft = cameraMaxLeft;
64                         
65                         if (nowTop <= 0) nowTop = 0;
66                         else if (nowTop >= cameraMaxTop)  nowTop = cameraMaxTop;
67 
68                         objCamera.css({ left: nowLeft + "px", top: nowTop + "px" }); //镜头的移动
69 
70                         nowLeft = nowLeft * zoom;
71                         nowTop = nowTop * zoom;
72 
73                         objZoomImg.css({ "margin-left": -nowLeft + "px", "margin-top": -nowTop + "px" });
74                     });
75                 });
76 
77                 objCamera.on("mouseout", function (e) {
78                     $(this).hide();
79                     $(document).off("mousemove");
80                     $(opt.zoom, obj).hide();
81                 });
82             }
83         })(jQuery);

1  $(function () {
2             $(".test").gysFdj({ ori: ".testOri", zoom: ".testZoom"});                      
3         });