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

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

先看效果图:

html代码:

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

js插件代码:

  ; (function ($) {
             $.fn.gysFdj = function (options) {
                 var defaults = {
                     cameraW: 100, //镜头宽度
                     cameraH: 100, //镜头高度
                     cameraBjColor: "#000", //镜头背景色
                     zoomIndex: 10, //放大框div的层级
                     cameraOpacity: 0.6, //镜头透明度
                     zoomPos: 10, //放大框距离源框的位置
                     cameraIndex: 10//镜头的层级
                 }
                 var opt = $.extend({}, defaults, options); //合并参数          

                 if (!opt.ori) { alert("你没有指定源图框"); return; }
                 if (!opt.zoom) { alert("你没有指定放大框"); return; }
                 var obj = $(this); //当前最大框对象
                 if(obj.css("position")=="static"){obj.css("position","relative");}
                 var objOriDiv = $(opt.ori, obj); //源div
                 var objOriDivOffset = objOriDiv.offset();
                 var objOriDivLeft = objOriDivOffset.left; //源框的left
                 var objOriDivTop = objOriDivOffset.top; //源框的top
                 var objZoomDiv = $(opt.zoom, obj); //放大的div框
                 var objOriImg = $("img", objOriDiv); //源图框
                 var objZoomImg = $("img", objZoomDiv); //放大框
                 var objOriImgW = objOriImg.width();
                 var objOriImgH = objOriImg.height();
                 objOriDiv.width(objOriImgW).height(objOriImgH);
                 obj.width(objOriImgW).height(objOriImgH);

                 var objOriDivW = objOriDiv.width();
                 var objOriDivH = objOriDiv.height();
                 var cameraMaxLeft = objOriDivW - opt.cameraW; //镜头的最大left
                 var cameraMaxTop = objOriDivH - opt.cameraH; //镜头的做大top

                 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
                 obj.append("<div class='camera'></div>"); //填充镜头
                 var objCamera = $(".camera", obj);
                 objCamera.css(cameraCSs); //添加样式                

                 var zoom = objZoomImg.width() / objOriImgW; //放大倍数
                 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框

                 var nowLeft = 0, nowTop = 0;
                 objOriDiv.on("mouseover", function () {
                     objCamera.show(); //显示镜头,
                     objZoomDiv.show(); //显示放大框
                     $(document).on("mousemove", function (e) {
                         nowLeft = e.clientX - objOriDivLeft - opt.cameraW / 2+ $(document).scrollLeft();
                         nowTop = e.clientY-objOriDivTop - opt.cameraH / 2 + $(document).scrollTop();
                         if (nowLeft <= 0)   nowLeft = 0;
                         else if (nowLeft >= cameraMaxLeft)   nowLeft = cameraMaxLeft;

                         if (nowTop <= 0) nowTop = 0;
                         else if (nowTop >= cameraMaxTop)  nowTop = cameraMaxTop;

                         objCamera.css({ left: nowLeft + "px", top: nowTop + "px" }); //镜头的移动

                         nowLeft = nowLeft * zoom;
                         nowTop = nowTop * zoom;

                         objZoomImg.css({ "margin-left": -nowLeft + "px", "margin-top": -nowTop + "px" });
                     });
                 });

                 objCamera.on("mouseout", function (e) {
                     $(this).hide();
                     $(document).off("mousemove");
                     $(opt.zoom, obj).hide();
                 });
             }
         })(jQuery);

插件的调用:

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