jQuery to achieve the scroll mouse zoom in and out of the picture method of attached to demo source download

This article illustrates how jQuery can zoom in and out by scrolling the mouse. To share with you for your reference, as follows:

In the process of project production, encountered such a demand, developed 1, record 1.

First, we 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"> You can zoom in or out by scrolling the middle mouse button </span>
</div>

In this style, I set the image style to 670px in order to avoid the phenomenon that the image is too large to be displayed outside the page.

Then I used a plugin for jquery mousewheel to solve the problem of scrolling the middle mouse button. Here is the specific code for jquery:

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

In this code, we use the originalEvent function to get the position of the mouse, which is available 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

Then in the code, I did the following to determine the initial height and width of the image and the aspect ratio of the image to be displayed (for the purpose of 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');

Among them, tempStep is mainly for the purpose of realizing the ratio value of zoom and zoom when rolling. After doing this, I removed the width style of image, mainly for 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;

The above section is relatively simple, mainly scrolling up and down judgment, and then equal scale to enlarge or shrink the image. event.preventDefault () guarantees that the page will not scroll while scrolling the image.

This plugin is attached below:

Click here to download.

More about jQuery related content interested readers can view the site features: "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 method summary" and "jQuery common plug-ins and usage summary"

I hope this article will be helpful to you jQuery program design.