先看效果图:
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 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 });