Write your own jquery plugin Magnifier

The reason to write this plugin is because the previous time in a site to see the application, at that time feel quite fun, I want to achieve one, in the online search for information, drawing on the code of others, to achieve the following. Look at it:

　　

1.> Small Map

　　

　　

2.> Large map (the actual size than the following picture to be larger, the following picture is my cut small size chart)

　　

3.> Magnifier Effect

　　

The third picture is the magnifying glass effect. These two pictures also copy down from other people's website, give the site URL: http://www.cunqianguan.me/

You can directly visit the URL to see the actual effect. I hope the webmaster will not mind.

The plug-in implementation code is as follows:

(function() {$.fn. Magnifier=function(options) {//Default parameter Settings        varSettings ={diameter:150,//diameter size of MagnifierBorderwidth:2,//Magnifier Border SizeBorderColor: "White",//magnifying glass border colorBackgroundimg: ". /img/111.jpg "//picture inside the magnifying glass(ie large image)        }; //Merging Parameters        if(Options) $.extend (settings, options); //Chain Principle        return  This. each (function () {            //stores the current object            varRoot = $ ( This); //Current object Width height            varWroot =root.width (); varHroot =root.height (); //offset left and top            varoffset =Root.offset (); //Magnifier Style            varstyle = "background-position:0px 0px;background-repeat:no-repeat;float:left;"; Style+ = "position:absolute;box-shadow:0 0 5px #777, 0 0 10px #aaa inset;display:none; "; Style+ = "width:" + string (settings.diameter) + "Px;height:" + string (settings.diameter) + "PX;"; Style+ = "Border-radius:" + String (SETTINGS.DIAMETER/2 + settings.borderwidth) + "PX;"; Style+ = "border:" + String (settings.borderwidth) + "px Solid" + Settings.bordercolor + ";"; //Create Magnifier            varMagnifier = $ ("<div style= '" + Style + "' ></div>"). AppendTo (Root.parent ()); //picture (when there is no large image, for the small picture itself)            varBackgroundimg = settings.backgroundimg? Settings.backgroundImg:root.attr ("src"); //put the picture inside the magnifying glassMagnifier.css ({backgroundimage: "url ('" + backgroundimg + "')" }); //Zoom ratio            varWratio = 0;//width            varHratio = 0;//Height            //when the picture is loaded, calculate the zoom ratio            //because the picture is not originally in the DOM document, the Load event is not triggered when the page loads, so the load event is triggered by executing appendto$ ("function() {Wratio= $( This). Width ()/Wroot; Hratio= $( This). Height ()/Hroot;            }). AppendTo (Root.parent ()); //magnifying glass and its background image position control            functionPosition (e) {varLpos = parseint (E.pagex-offset.left); varTPos = parseint (E.pagey-offset.top); //determine if the mouse is on the picture                if(Lpos < 0 | | TPos < 0 | | Lpos > Wroot | | TPos >hroot) {magnifier.hide ();//Do not hide Magnifier                } Else{magnifier.show ();//Conversely display Magnifier                    //control the position (SETTINGS.DIAMETER/2) radius of the background picture inside the magnifying glassLpos = String (((e.pagex-offset.left) * WRATIO-SETTINGS.DIAMETER/2) * (-1)); TPos= String (((e.pagey-offset.top) * HRATIO-SETTINGS.DIAMETER/2) * (-1)); Magnifier.css ({backgroundposition:lpos+ ' px ' + TPos + ' px ' }); //control the position of the Magnifier itselfLpos = String (E.PAGEX-SETTINGS.DIAMETER/2); TPos= String (E.PAGEY-SETTINGS.DIAMETER/2); Magnifier.css ({left:lpos+ ' px ', Top:tpos + ' px ' }); }            }            //magnifying GlassMagnifier.mousemove (Position); //Current ObjectRoot.mousemove (Position);    }); };}) ();

Implementation principle:

Here are two pictures, a small picture, a big picture. Sets the large image as the background image of the magnifying glass, while the mouse moves on the small chart, while controlling the position of the large background in the magnifying glass. The two pictures are best sized to achieve the best results. When there is no large image, then the default is the small map itself, at this time because of the two picture size, so the magnifying glass effect is not obvious, and no amplification is the same.

This plugin uses some properties of HTML5,CSS3, IE8 and the following versions are incompatible, the magnifying glass is square.

The example demo is as follows:

<!DOCTYPE HTML><Head>    <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" />    <title>Css3+jquery Image Magnifier Effect</title>    <styletype= "Text/css">Body{Background-color:Black;        }. Box{width:700px;margin:50px Auto;        }    </style></Head><Body>    <Divclass= "box">
　　　　 <!--small  --        <imgalt=""ID= "Img_02"src=".. /img/222.gif "width= "The "Height= "$" />    </Div>    <Scriptsrc=".. /scripts/jquery-1.4.1.min.js "type= "Text/javascript"></Script>    <Scriptsrc=".. /scripts/jquery.similar.magnifier.js "type= "Text/javascript"></Script>    <Scripttype= "Text/javascript">        $("#img_02").    Magnifier (); </Script></Body></HTML>

What do not understand the message it, 12 points more, sleepy ....

Write your own jquery plugin Magnifier