Use jquery to achieve magnifying glass effect

Implementation Principle

First, let’s explain how to achieve the magnifying glass effect:

Method 1: Prepare a large picture with high pixels. When the mouse is placed on the original picture, load and display the corresponding position of the large picture.

Method 2: Enlarge the original image, that is, adjust the length and width of the original image.

Above we introduced two methods to achieve the magnifying glass effect. Next, we apply the above two methods to our jQuery plug-in.

First of all, we need an img element to display the original image object, and a container as a display box; the large image object is stored in the display box. When the mouse moves over the original image, the corresponding part is displayed by absolute positioning of the large image, achieving a magnifying glass-like effect.

Next, let us define the Index.html page, the specific implementation is as follows:

<!DOCTYPE html>
<html>
<head>
<title>放大镜效果</title>
<meta charset="utf-8"/>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<link type="text/css" rel="stylesheet" href="css/reset.css"/>
<link type="text/css" rel="stylesheet" href="css/main.css"/>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery.imageZoom.js"></script>


</head>
<body> 
<div class="magnify">
<div class="large"></div>
<img class="small" src="images/iphone.jpg" width="200" />
</div>

<div class="magnify_02">
<div class="large_02"></div>
<img class="small_02" src="images/img5.jpg" width="400"/>
</div>
<script type="text/javascript">
$(function(){

  $(".magnify").hover(function(){
      $.fn.imageZoom({
    small :"small",
    large : "large",
    magnify: "magnify"
    });

  },function(){})

  $(".magnify_02").hover(function(){
    $.fn.imageZoom({
    small : "small_02",
    large : "large_02",
    magnify: "magnify_02"
    });

  },function(){})

})
</script>
</body>
</html>

Copy after login

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, 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_02 { display: block; }

Copy after login

mousemove event
Next, we use the jQuery plug-in to achieve the magnifying glass effect. When the mouse moves over the small object, the corresponding position of the large image will be displayed in the large object. This involves the mousemove event, so we need Implement the listening method for the mousemove event.

Implement jquery.imagezoom.js plug-in:

(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,
      current_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() && my <$(this).height() && mx > 0 && my > 0) {

          $large.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);

Copy after login

Note: When the mouse moves to the magnify object, we need to get the relative coordinate position of the mouse in magnify. Here we define the relative coordinates as (mx, my). From the above figure, we know that the relative coordinates are equal to (pageX - offsetLeft , pageY - offsetTop).

Now, we have obtained the coordinate value of the mouse in the magnify object. Next, we need to obtain the corresponding coordinates of the large image. Here we define the corresponding coordinates of the large image as (rx, ry). We can use the proportional relationship Get the value of (rx,ry).

mx / small.width (width of the original image) = rx / native_width (width of the large image)

my / small.height (length of the original image) = ry / native_height (length of the large image)

Through the above proportional relationship, we know that the coordinates (rx, ry) of the large image are equal to (mx/small.widthnative_width, my/small.heightnative_height).

mousewheel event
Earlier, we used the mousemove event to enlarge the image. Here we will use the mouse wheel event to achieve the image enlargement effect.

Because, different browsers have different scroll wheel events. There are three main types: onmousewheel (IE 6/7/8), mousewheel (IE9, Chrome, Safari and Opera) and DOMMouseScroll (only supported by Firefox). These three events will not be introduced in detail here.

Due to differences between different browsers, in order to achieve compatibility between browsers, we need to monitor the above three wheel events (onmousewheel, mousewheel and DOMMouseScroll). The specific implementation is as follows:

$(".magnify").bind('DOMMouseScroll mousewheel onmousewheel', function(e) {
});

Copy after login

Above, we have implemented a wheel event listening method that is compatible with different browsers. Next, when judging whether the wheel is up or down, we must also consider the compatibility of different browsers. Mainstream browsers (IE, Opera, Safari, Firefox, In Chrome), Firefox uses detail, and the other four categories use wheelDelta; the two are only inconsistent in their values, which means they have the same meaning. detail and wheelDelta only take two values each, detail only takes ±3, and wheelDelta only takes ±120, where positive Numbers represent upwards and negative numbers represent downwards.

Since both detail and wheelDelta have two values indicating scrolling up or down, compatibility between different browsers can be achieved in the following ways. The specific implementation is 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)));
});

Copy after login

Above, we have dealt with different browser wheel monitoring methods. When the user scrolls the wheel, the size of the original image needs to be dynamically modified. Here we define the scaling ratio as 0.3, which means that every time the user rolls the wheel, the original image is Just scale according to the ratio of 0.3. The specific implementation is 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");

Copy after login

Above, we have implemented a magnifying glass effect. When we hover the mouse over the image, the corresponding part of the image will automatically be enlarged. Of course, we can adjust the magnification ratio through the scroll 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

Copy after login

Use jquery to achieve magnifying glass effect_jquery