自己写的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 = {  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"});                      
        });