jQuery implements the method of zooming in and out of images by scrolling the mouse (with demo source code download)

jQuery implements the method of zooming in and out of images by scrolling the mouse (with demo source code download)_jquery

WBOY

Release： 2016-05-16 15:12:10

Original

1427 people have browsed it

The example in this article describes how jQuery implements scrolling the mouse to zoom in and out of images. Share it with everyone for your reference, the details are as follows:

During the project production process, I encountered such a need, so I developed one and recorded it.

First, you need to define html elements and css styles:

<div style="position:relative;">
<asp:Image ID="myImg" runat="server" Width="670px" />
<span style="position:relative;display:none; background:wheat;border:1px solid gray;padding:3px;overflow:hidden;" id="NotificationMsg">滚动鼠标中键，可以放大或者缩小图片</span>
</div>

Copy after login

In this style, I set the image style to 670px. The purpose is to prevent the image from being displayed outside the page when it is too large.

Then I used a jquery mousewheel plug-in to solve the scrolling problem of the middle mouse button. The following is the specific jquery operation code:

<script type="text/javascript">
$(document).ready(function() {
  var count = 0;
  $("#ctl00_ContentPlaceHolder1_myImg").hover(function(e) {
      var left = e.originalEvent.x || e.originalEvent.layerX || 0; //get the left position
      var top = e.originalEvent.y || e.originalEvent.layerY || 0;  //get the top position
      $("#NotificationMsg").css({ 'position': 'absolute', 'left': left, 'top': top });
      $("#NotificationMsg").css("display", "block");
  }, function() {
    //alert('mouserout');
    $("#NotificationMsg").css("display", "none");
  }).mousewheel(function(event, delta, deltaX, deltaY) {
    count++;
    var height = $(this).attr("height");  //get initial height 
    var width = $(this).attr("width");   // get initial width
    var stepex = height / width;  //get the percentange of height / width
    var minHeight = 150;  // min height
    var tempStep = 50;  // evey step for scroll down or up
    $(this).removeAttr('style');
    if (delta == 1) { //up
      $(this).attr("height", height + count * tempStep);
      $(this).attr("width", width + count * tempStep / stepex);
    }
    else if (delta == -1) { //down
      if (height > minHeight)
        $(this).attr("height", height - count * tempStep);
      else
        $(this).attr("height", tempStep);
      if (width > minHeight / stepex)
        $(this).attr("width", width - count * tempStep / stepex);
      else
        $(this).attr("width", tempStep / stepex);
    }
    event.preventDefault();
    count = 0;
  });
});
</script>

Copy after login

In this code, the originalEvent function is used to obtain the position of the mouse. It can be used for testing under IE9 and firefox:

var left = e.originalEvent.x || e.originalEvent.layerX || 0; //get the left position
var top = e.originalEvent.y || e.originalEvent.layerY || 0;  //get the top position

Copy after login

Then in the code, I performed the following operations to determine the initial height and width of the image and the aspect ratio of the image display (the purpose is to achieve equal scaling):

var height = $(this).attr("height");  //get initial height 
var width = $(this).attr("width");   // get initial width
var stepex = height / width;  //get the percentange of height / width
var minHeight = 150;  // min height
var tempStep = 50;  // every step for scrolling down or up
$(this).removeAttr('style');

Copy after login

Among them, tempStep is mainly used to realize the ratio value that can be reduced and enlarged when scrolling. After doing this, I removed the width style of the image, mainly to enable zooming in or out.

if (delta == 1) { //up
  $(this).attr("height", height + count * tempStep);
  $(this).attr("width", width + count * tempStep / stepex);
}
else if (delta == -1) { //down
  if (height > minHeight)
    $(this).attr("height", height - count * tempStep);
  else
    $(this).attr("height", tempStep);
  if (width > minHeight / stepex)
    $(this).attr("width", width - count * tempStep / stepex);
  else
    $(this).attr("width", tempStep / stepex);
}
event.preventDefault();
count = 0;

Copy after login

The above paragraph is relatively simple. It mainly involves scrolling up and down to judge, and then enlarging or reducing the image in equal proportions. event.preventDefault() can ensure that the page will not scroll while the image is scrolling.

Attached is this plug-in:

Click hereDownload from this site.

Readers who are interested in more jQuery-related content can check out the special topics on this site: "JQuery drag effects and skills summary", "jQuery extension skills summary", "JQuery common classic special effects summary", "jQuery animation and special effects usage summary", "jquery selector usage summary" and "jQuery common plug-ins and usage Summary》

I hope this article will be helpful to everyone in jQuery programming.