jQuery implementiert die Methode zum Vergrößern und Verkleinern von Bildern durch Scrollen mit der Maus (mit Download des Demo-Quellcodes)_jquery

Das Beispiel in diesem Artikel beschreibt, wie jQuery das Scrollen mit der Maus zum Vergrößern und Verkleinern von Bildern implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Während des Projektproduktionsprozesses stieß ich auf eine solche Anforderung, also habe ich eine entwickelt und aufgezeichnet.

Zuerst müssen Sie HTML-Elemente und CSS-Stile definieren:

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

In diesem Stil habe ich den Bildstil auf 670 Pixel eingestellt. Der Zweck besteht darin, zu verhindern, dass das Bild außerhalb der Seite angezeigt wird, wenn es zu groß ist.

Dann habe ich ein JQuery-Mausrad-Plug-In verwendet, um das Scrollproblem der mittleren Maustaste zu lösen. Das Folgende ist der spezifische JQuery-Operationscode:

<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 diesem Code wird die Funktion originalEvent verwendet, um die Position der Maus zu ermitteln. Sie kann zum Testen unter IE9 und Firefox verwendet werden:

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

Dann habe ich im Code die folgenden Vorgänge ausgeführt, um die anfängliche Höhe und Breite des Bildes sowie das Seitenverhältnis der Bildanzeige zu bestimmen (der Zweck besteht darin, eine gleichmäßige Skalierung zu erreichen):

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

Unter diesen wird tempStep hauptsächlich verwendet, um den Verhältniswert zu realisieren, der beim Scrollen verkleinert und vergrößert werden kann. Danach habe ich den Breitenstil des Bildes entfernt, hauptsächlich um das Vergrößern oder Verkleinern zu ermöglichen.

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;

Der obige Absatz ist relativ einfach. Er besteht hauptsächlich darin, zur Beurteilung nach oben und unten zu scrollen und dann das Bild in gleichen Proportionen zu vergrößern oder zu verkleinern. event.preventDefault() kann sicherstellen, dass die Seite nicht gescrollt wird, während das Bild gescrollt wird.

Im Anhang finden Sie dieses Plug-in:

Klicken Sie hierVon dieser Website herunterladen.

Leser, die an weiteren jQuery-bezogenen Inhalten interessiert sind, können sich die speziellen Themen auf dieser Website ansehen: „Zusammenfassung der Drag-Effekte und Fähigkeiten von JQuery“, „Zusammenfassung der Fähigkeiten der jQuery-Erweiterung“ , „Zusammenfassung der allgemeinen klassischen JQuery-Spezialeffekte“, „Zusammenfassung der Verwendung von jQuery-Animationen und Spezialeffekten“, „Zusammenfassung der Verwendung des JQuery-Selektors“ und „jQuery Allgemeine Plug-Ins und Nutzungsübersicht》

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der jQuery-Programmierung befassen.