Of Stack

Using jquery to achieve the magnifying glass effect

  • 2020-03-30 03:50:40
  • OfStack

Realize the principle of

First, let's explain the magnifying glass effect:

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

Method 2: enlarge the original picture, that is, adjust the length and width of the original picture.

There are two ways to implement a magnifying glass, and we'll apply them to our jQuery plug-in.

First, we need an img element to display the original object, and we need a container as a display box. The display box contains large image objects. When the mouse moves to the original picture, through the absolute positioning of the large picture to display the corresponding part, to achieve a magnifying glass effect.

Next, let's define the index.html page, as follows: 


<!DOCTYPE html>
<html>
<head>
<title> Magnifying glass effect </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>

CSS styles: 


.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; }

Mousemove event
Next, we implement the magnifying glass effect in the form of jQuery plug-in. 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.

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);

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 coordinate as (mx,my). From the figure above we know that the relative coordinate is equal to (pagex-offsetleft, pagey-offsettop).

Now that we have the mouse coordinate value in the magnify object, we need to get the corresponding coordinates of the larger image. Here we define the corresponding coordinates of the larger image as (rx,ry). We can get the value of (rx,ry) through the proportional relation.

Mx/small-width (width of original image) = rx/native_width (width of large image)

My/small.height (length of original drawing) = ry/native_height (length of large drawing)

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

Mousewheel event
Previously, we used the mousemove event to zoom in on the image, and here we will use the mouse wheel event to zoom in on the image.

Due to the differences between different browsers, in order to achieve the compatibility between browsers, we need to listen for the above three kinds of scroll wheel events (onmousewheel, mousewheel and DOMMouseScroll), which are as follows: 


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

Above, we implemented the wheel event listening method that is compatible with different browsers. Next, it is also necessary to consider the compatibility of different browsers to determine whether the wheel is up or down. The detail and wheelDelta only take two values each, the detail only takes plus or minus 3, and the wheelDelta only takes plus or minus 120, where positive Numbers mean up and negative Numbers mean down.

Since both detail and wheelDelta have two values for scrolling up and down, compatibility between browsers can be achieved in the following ways: 


$(".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 dealt with the monitoring methods of different browser rollers. When the user rolls the rollers, it is necessary to dynamically modify the size of the original image. Here, we define the scaling ratio as 0.3, that is, whenever the user rolls the original image of the roller, the scaling ratio is 0.3. 


// 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 realized the magnifying glass effect. When we hover over the image, we will automatically enlarge the corresponding part of the image. 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

Related articles: