jquery realizes picture Magnifier function _jquery

Implementation principle:

Here are two pictures, a small picture, a big picture. Set the large image to be the background picture of the magnifying glass, and control the position of the large background image in the magnifying glass when the mouse moves on the small picture. Two pictures of the best size is equal to the ratio, so as to achieve the best results. When there is no larger picture, the default is the small picture itself, then because the two pictures of the same size, so the magnifying glass effect is not obvious, and not magnified is the same.

This plugin uses some of the HTML5,CSS3 properties, IE8 and the following versions are not compatible and the Magnifier is square.

The screenshot of the running effect is as follows:

The specific code is as follows:

(function () {$.fn. Magnifier = function (options) {//default parameter set var settings = {diameter:150,//Magnifier diameter size borderwidth:2,// Magnifier Border size bordercolor: "White",//Magnifying glass border color backgroundimg: "...

  /img/111.jpg "//magnifying glass (ie larger image)};

  Merge parameter if (options) $.extend (settings, options);

   Chain principle return This.each (function () {///Store current object var root = $ (this);
   The current object is wide-high var wroot = Root.width ();

   var hroot = Root.height ();

   Offset left and top var offset = Root.offset ();
   Magnifier style var style = "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 + ";"; InvasiveBuild Magnifier var magnifier = $ ("<div style= '" + Style + "' ></div>"). Appendto (Root.parent ()); Picture (when there is no larger picture, for the small figure itself) var backgroundimg = settings.backgroundimg?

   Settings.backgroundImg:root.attr ("src");

   Put the picture inside the magnifying glass magnifier.css ({backgroundimage: "url (' + backgroundimg + ')"}); Zoom ratio var wratio = 0; width var hratio = 0;  Height//Picture loaded, calculate scaling//Since the picture was 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 $ (" '). Load (function () {Wratio = $ (this). Width ()/wroot;
   Hratio = $ (this). Height ()/hroot;

   }). Appendto (Root.parent ());
    Magnifier and its background picture position control function Position (e) {var lpos = parseint (e.pagex-offset.left);

    var TPOs = parseint (e.pagey-offset.top); Determine if the mouse is on the picture if (Lpos < 0 | | TPOs < 0 | | Lpos > Wroot | |  TPOs > Hroot) {magnifier.hide ();////not hidden Magnifier} else {magnifier.show (); (Settings.diameter/2) Radius lpos = 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 Magnifier itself Position lpos = String (E.PAGEX-SETTINGS.DIAMETER/2);

     TPOs = String (E.PAGEY-SETTINGS.DIAMETER/2);
    Magnifier.css ({left:lpos + ' px ', Top:tpos + ' px '});

   }//Magnifier magnifier.mousemove (Position);

  Current Object Root.mousemove (Position);
 });
};
 })();

The example demo is as follows:

<! DOCTYPE html>
 
 

About jquery realization Picture Magnifier function content is introduced here, hope everybody study carefully, apply to apply.