Self-written jQuery magnifier plug-in effect (2) (only one image is used)

Not much nonsense. Let's take a look at it first. It uses the same small image as the previous chapter: The disadvantage of this method is that if the magnification is set too large, it will lead to blurred images. however, image loading is much faster than loading two images. Plug-in code: Copy code 1; (function ($) {2 $. fn. gysFdj = function (options) {3 var defaluts = {4 cameraW: 100, // lens width 5 cameraH: 100, // lens height 6 pointBjColor: "#000 ", // The background color of the lens is 7 pointOpacity: 0.6, // the transparency of the lens is 8 zoomPos: 10, // The zoom-in box is 9 zoom from the position of the source box: 2 // magnification 10}; 11 options = $. extend (defaluts, options); 12 var obj = $ (this); 13 obj. addClass ("gysFdjOrigin"); 14 var objOriImg =$ ("img", obj); 15 var objOriImgW = objOriImg. width (); 16 var objOriImgH = objOriImg. height (); 17 var fdCount = $ (". gysFdjOrigin "). length; 18 var fdAttr = "fd"; // attribute variable 19 obj. attr (fdAttr, fdCount); // Add the attribute 20 var offset = obj. offset (); 21 var objLeft = offset. left; // object left 22 var objTop = offset. top; // object top23 var objWidth = obj. width (); // object width 24 var objHeight = obj. height (); // object height 25 // The activity range of the lens relative to the box is 26 27 var cameraMaxLeft = objWidth + objLeft-options. cameraW; // The maximum left range is 28 var cameraMaxTop = objHeight + objTop-options. cameraH; // The maximum value is 29 30 var imgStr = obj.html (); 31 var html = ""; 32 html ++ = "<div style = 'left: "+ (objLeft + objWidth + options. zoomPos) + "px; top:" + objTop + "px; display: none; position: absolute; width:" + (options. cameraW * options. zoom) + "px; height:" + (options. cameraH * options. zoom) + "px; overflow: hidden; 'class = 'gysfdjbox'" + fdAttr + "=" + fdCount + ">" + imgStr + "</div> "; 33 $ ("body "). append (html); 34 $ ("img", $ (". gysFdjBox ["+ fdAttr +" = "+ fdCount +"] "). width (objWidth * options. zoom ). height (objHeight * options. zoom); 35 var objFdjcamera = null; 36 if ($ ("# gysFdjcamera "). length = 0) {37 var pointBlock = "<div id = 'gysfdjcamera 'style = 'width:" + options. cameraW + "px; height:" + options. cameraH + "px; background-color:" + options. pointBjColor + "; opacity:" + options. pointOpacity + "; filter: alpha (opacity =" + options. pointOpacity * 100 + "); cursor: crosshair; position: absolute; display: none; '> </div>"; 38 $ ("body "). append (pointBlock); 39} 40 objFdjcamera = $ ("# gysFdjcamera"); 41 var nowLeft = 0, nowTop = 0; 42 obj. on ("mouseover", function (event) {43 objFdjcamera. show (). attr (fdAttr, fdCount); 44 $ (". gysFdjBox ["+ fdAttr +" = "+ fdCount +"] "). show (); 45 $ (document ). on ("mousemove", function (event) {46 var pointX = event. clientX + $ (document ). scrollLeft (); 47 var pointY = event. clientY + $ (document ). scrollTop (); 48 nowLeft = pointX-options. cameraW/2; 49 nowTop = pointY-options. cameraH/2; 50 if (nowLeft <= objLeft) {nowLeft = objLeft;} 51 else if (nowLeft> = cameraMaxLeft) {nowLeft = cameraMaxLeft ;} 52 if (nowTop <= objTop) {nowTop = objTop;} 53 else if (nowTop> = cameraMaxTop) {nowTop = cameraMaxTop;} 54 objFdjcamera.css ({left: nowLeft + "px", top: nowTop + "px"}); 55 nowLeft = (nowLeft-objLeft) * options. zoom; 56 nowTop = (nowTop-objTop) * options. zoom; 57 $ ("img", $ (". gysFdjBox ["+ fdAttr +" = "+ fdCount +"] "00000000.css ({" margin-top ":-nowTop +" px "," margin-left ": -nowLeft + "px"}); 58}); 59}); 60 objFdjcamera. on ("mouseleave", function () {61 $ (document ). off ("mousemove"); 62 objFdjcamera. hide (); 63 $ (". gysFdjBox ["+ fdAttr +" = "+ fdCount +"] "). hide (); 64}); 65} 66}) (jQuery); copy the code CSS code: 1. test {width: 300px; height: 400px; overflow: hidden;} HTML code: 1 <div class = "test"> </div> plugin call: 1 $ (function () {2 $ (". test "). gysFdj ({zoom: 2}); 3 });