JQuery implements the method of scrolling the mouse to zoom in and out the image (with demo source code download), jquerydemo

JQuery implements the method of scrolling the mouse to zoom in and out the image (with demo source code download), jquerydemo

This document describes how to zoom in and out images by using jQuery. We will share this with you for your reference. The details are as follows:

In the project production process, if you encounter such a requirement, you can develop one and record 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 =" icationicationmsg "> scroll the middle mouse button, images can be zoomed in or out </span> </div>

In this style, I set the image style to 670px to avoid the external display of the page when the image is too large.

Then I used a jquery mousewheel plug-in to solve the scroll problem of the middle mouse buttons. 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>

In this Code, the originalEvent function is used to obtain the location of the mouse. It can be used in IE9 and firefox tests:

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

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 (to achieve proportional scaling ):

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

Here, tempStep is mainly used to reduce and enlarge the ratio value when scrolling. After doing this, I removed the width style of the image, mainly to zoom 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 for the upper and lower scroll judgment, and then proportional zoom in or zoom out the image. Event. preventDefault () ensures that the page does not scroll along the scrolling process.

The plug-in is attached below:

Click here to download.