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

这个思路的方法会带来一个小问题,就是当鼠标放到小图上去时,会开始加载大图片,网速不佳的时候,会出现加载慢的情况.但是放大的效果和你所给出的大图片的清晰度是一样的.

先看效果图:

html代码:

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>

js插件代码:

 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                 var objOriDiv = $(opt.ori, obj); //源div 
19                 var objOriDivOffset = objOriDiv.offset();
20                 var objOriDivLeft = objOriDivOffset.left; //源框的left
21                 var objOriDivTop = objOriDivOffset.top; //源框的top
22                 var objZoomDiv = $(opt.zoom, obj); //放大的div框
23                 var objOriImg = $("img", objOriDiv); //源图框               
24                 var objZoomImg = $("img", objZoomDiv); //放大框
25                 var objOriImgW = objOriImg.width();
26                 var objOriImgH = objOriImg.height();
27                 objOriDiv.width(objOriImgW).height(objOriImgH);
28                 obj.width(objOriImgW).height(objOriImgH);
29 
30                 var objOriDivW = objOriDiv.width();
31                 var objOriDivH = objOriDiv.height();
32                 var cameraMaxLeft = objOriDivW - opt.cameraW; //镜头的最大left
33                 var cameraMaxTop = objOriDivH - opt.cameraH; //镜头的做大top
34 
35                 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               
36                 obj.append("<div class='camera'></div>"); //填充镜头
37                 var objCamera = $(".camera", obj);
38                 objCamera.css(cameraCSs); //添加样式                
39                 
40                 var zoom = objZoomImg.width() / objOriImgW; //放大倍数
41                 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框
42 
43                 var nowLeft = 0, nowTop = 0;
44                 objOriDiv.on("mouseover", function () {
45                     objCamera.show(); //显示镜头,
46                     objZoomDiv.show(); //显示放大框 
47                     $(document).on("mousemove", function (e) {
48                         nowLeft = e.clientX - objOriDivLeft - opt.cameraW / 2  $(document).scrollLeft();
49                         nowTop = e.clientY-objOriDivTop - opt.cameraH / 2   $(document).scrollTop();
50                         if (nowLeft <= 0)   nowLeft = 0;                       
51                         else if (nowLeft >= cameraMaxLeft)   nowLeft = cameraMaxLeft;
52                         
53                         if (nowTop <= 0) nowTop = 0;
54                         else if (nowTop >= cameraMaxTop)  nowTop = cameraMaxTop;
55 
56                         objCamera.css({ left: nowLeft   "px", top: nowTop   "px" }); //镜头的移动
57 
58                         nowLeft = nowLeft * zoom;
59                         nowTop = nowTop * zoom;
60 
61                         objZoomImg.css({ "margin-left": -nowLeft   "px", "margin-top": -nowTop   "px" });
62                     });
63                 });
64 
65                 objCamera.on("mouseout", function (e) {
66                     $(this).hide();
67                     $(document).off("mousemove");
68                     $(opt.zoom, obj).hide();
69                 });
70             }
71         })(jQuery);

插件的调用:

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