jquery to achieve scrolling mouse zoom to reduce the image of the method (with demo source download) _jquery

This article describes the jquery implementation of the scrolling mouse zoom to reduce the picture. Share to everyone for your reference, specific as follows:

In the project production process, encountered such a demand, the development of a, recorded.

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" > Scroll the middle mouse button to enlarge or shrink the picture </span>
</div>

In this style, I set the style of the picture to 670px, the purpose is to avoid the picture too large, display to the outside of the page phenomenon.

Then I used a jquery MouseWheel plugin 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 = $ (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 * Temp
      STEP);
      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 get the location of the mouse, and the test is available 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 picture and the aspect ratio of the picture display (the goal is to achieve proportional scaling):

var height = $ (this). attr ("height");  Get initial height 
var = $ (this). attr ("width");   Get initial width
var stepex = height/width;  Get the Percentange of Height/width
var minheight = n;  Min height
var tempstep = m;  Every step for scrolling down or up
$ (this). Removeattr (' style ');

Among them, Tempstep is mainly for the purpose of scrolling, can be reduced and magnified the ratio value. After doing this, I removed the image's width style, mainly to achieve 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 paragraph is relatively simple, mainly to make up and down scrolling judgment, and then zoom in or out of the picture. Event.preventdefault () ensures that the page does not scroll as it scrolls through the picture.

This plugin is attached below:

Click here to download the site.

More about jquery-related content readers can view the site topics: "jquery drag-and-drop effects and tips summary", "JQuery Extended Skills Summary", "jquery common Classic Effects Summary", "jquery animation and special effects usage Summary", "jquery Selector usage Summary "jquery common Plug-ins and Usage summary"

I hope this article will help you with the jquery program design.