Using jquery to achieve Magnifier effect _jquery

Implementation principle

First, let's explain how Magnifier works:

Method One: Prepare a large picture of high pixel, when the mouse is placed on the original image, loading shows the corresponding position of the larger picture.

Method Two: To enlarge the original picture, that is, adjust the length and width.

Above we introduced two ways to achieve magnifier effect, next, we will apply the above two ways to our jquery plug-in.

First, we need an IMG element to display the original object, as well as a container as a display box, and a large drawing object in the Display box. When the mouse moved to the original image, by the large map to the absolute positioning to show the corresponding position, to achieve a similar magnifying glass effect.

Next, let's define the Index.html page, which is specifically implemented as follows:

<! DOCTYPE html>  

CSS style:

. magnify {width:200px; margin:50px auto; position:relative;}
. Large {width:175px; height:175px;position:absolute;border-radius:100%;z-index:99;box-shadow:0 0 0 7px Rgba (255, 255, 255, 0.85), 0 0 7px 7px rgba (0, 0, 0, 0.25), inset 0 0 40px 2px rgba (0, 0, 0, 0.25); Background:url ('.. /images/iphone.jpg ') No-repeat;display:none;
Small {display:block}

. magnify_02 {width:400px; margin:50px auto; position:relative;}
. large_02 {width:175px height:175px;position:absolute;border-radius:100%;z-index:99;box-shadow:0 0 0 7px Rgba (255, 25 5, 255, 0.85), 0 0 7px 7px rgba (0, 0, 0, 0.25), inset 0 0 40px 2px rgba (0, 0, 0, 0.25); Background:url ('.. /images/iphone.jpg ') No-repeat;display:none;
small_02 {display:block;}

MouseMove Events
Next, we implement the magnifying glass effect through the jquery plug-in form, when the mouse moves over the small object, it will show the corresponding position of the large map in the large object, which involves the MouseMove event, so We need to implement the MouseMove event listening method.

Implement Jquery.imagezoom.js Plug-ins:

(function ($) {$.fn.imagezoom = function (options) {var defaults = {scaling:0.3, small: "Small",

    Large: "Large", Magnify: "Magnify"}; options = $.extend (defaults, options), Native_width = 0, native_height = 0, current_width = 0, cur Rent_height = 0, magnify= "."

       +options.magnify; Small= "."
       +options.small;

       $small =$ (small); Large= "."
       +options.large;

     $large =$ (Large);

        $ (magnify). MouseMove (function (e) {var image_object = new Image ();

      IMAGE_OBJECT.SRC = $small. attr (' src ');

        if (!+[1,]) {native_height = Image_object.height; 

        Native_width = Image_object.width;
          else {image_object.onload = function () {image_object.onload = null;
          Native_height = Image_object.height;
          Native_width = Image_object.width;
        } current_height = $small. Height (); Current_width = $small. Width ();
        var Magnify_offset = $ (this). offset ();
        var mx = e.pagex-magnify_offset.left;

        var my = E.pagey-magnify_offset.top; if (MX < $ (this). Width () && me <$ (this). Height () && mx > 0 && i > 0) {$la

        Rge.fadein (100);
        else {$large. fadeout (100);  } if ($large. Is (": visible")) {var rx = Math.Round (mx/$small. Width () * native_width-$large. Width ()/ 2) *-1, ry = Math.Round (my/$small. Height () * native_height-$large. Height ()/2) *-1, BGP =
          Rx + "px" + ry + "px", px = mx-$large. Width ()/2, py = my-$large. Height ()/2;
        $large. css ({left:px, top:py, BACKGROUNDPOSITION:BGP});
  }

      //}
    });
};

 }) (JQuery);

Note: When the mouse is moved to the Magnify object, we need to get the relative coordinates of the mouse in the magnify, where we define the relative coordinates (MX,MY), and by the above figure we know that the relative coordinates are equal to (Pagex-offsetleft, Pagey- offsettop).

Now that we've got the coordinates of the mouse in the Magnify object, we need to get the corresponding coordinates for the larger graph, where we define the corresponding coordinates of the larger graph (rx,ry), and we can get the value of (rx,ry) by proportional relations.

Mx/small.width (width of the original) = Rx/native_width (width of the larger image)

My/small.height (length of the original) = Ry/native_height (Long of the larger image)

By the proportional relationship above, we know that the coordinates of the large graph (rx,ry) equals (Mx/small.widthnative_width, my/small.heightnative_height).

MouseWheel Events
in front, we enlarge the picture through the MouseMove event, here we will realize the picture amplification effect through the mouse wheel event.

Because, different browsers have different wheel events. There are three main types: OnMouseWheel (IE 6/7/8), MouseWheel (Ie9,chrome,safari and Opera) and Dommousescroll (only Firefox support), and the three events are not described here in detail.

Because of the differences between browsers, in order to achieve compatibility between browsers, we need to monitor the above three kinds of wheel events (Onmousewheel,mousewheel and Dommousescroll), specifically implemented as follows:

$ (". Magnify"). Bind (' Dommousescroll mousewheel onmousewheel ', function (e) {
});

Above, we have implemented compatible with different browser wheel event monitoring method, next, judge the wheel up or down also to consider the compatibility of different browsers, the mainstream browser (IE, Opera, Safari, Firefox, Chrome) in Firefox using detail, The remaining four classes use Wheeldelta, the two are only inconsistent on the value, the meaning is consistent, detail and Wheeldelta only two values, detail only take ±3,wheeldelta only ±120, where positive number is indicated as up, negative number indicates downward.

Since both detail and Wheeldelta have two values that indicate scrolling up or down, compatibility can be achieved in the following ways between different browsers, as follows:

$ (". Magnify"). Bind (' Dommousescroll mousewheel onmousewheel ', function (e) {

  //cross-browser wheel Delta
  var e = window.event | | E Old IE support.
  var delta = Math.max ( -1, Math.min (1, (E.wheeldelta | |-e.detail)));

Above, we have processed different browser wheel listener methods, when the user needs to dynamically change the size of the original image when rolling the wheel, here we define the scaling ratio of scaling to 0.3, that is, whenever the user scrolls the original scroll of the scroll wheel on the scale of 0.3, specifically implemented as follows:

Gets the image scaling height and width.
Native_height + + (native_height * scaling * delta);
Native_width + + (native_width * scaling * delta);

Update backgroud image size.
$large. CSS (' background-size ', native_width + "px" + native_height + "px");

Above, we achieved a magnifying glass effect, when we hover over the picture will automatically enlarge the corresponding parts of the picture, of course, we can adjust the magnification by the wheel.

Reference

Http://tech.pro/tutorial/681/css-tutorial-the-background-position-property
http://www.sitepoint.com/ html5-javascript-mouse-wheel/
http://thecodeplayer.com/walkthrough/ Magnifying-glass-for-images-using-jquery-and-css3