jQuery implémente la méthode de zoom avant et arrière sur les images en faisant défiler la souris (avec téléchargement du code source de la démo)_jquery

L'exemple de cet article décrit comment jQuery implémente le défilement de la souris pour zoomer et dézoomer sur les images. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Pendant le processus de production du projet, j'ai rencontré un tel besoin, j'en ai donc développé un et l'ai enregistré.

Tout d'abord, vous devez définir les éléments html et les styles CSS :

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

Dans ce style, j'ai défini le style de l'image sur 670px. Le but est d'éviter que l'image ne s'affiche en dehors de la page lorsqu'elle est trop grande.

Ensuite, j'ai utilisé un plug-in jquery mousewheel pour résoudre le problème de défilement du bouton central de la souris. Voici le code d'opération jquery spécifique :

.

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

Dans ce code, la fonction originalEvent est utilisée pour obtenir la position de la souris. Elle peut être utilisée pour des tests sous IE9 et 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

Ensuite, dans le code, j'ai effectué les opérations suivantes pour déterminer la hauteur et la largeur initiales de l'image ainsi que le rapport hauteur/largeur de l'affichage de l'image (le but est d'obtenir une mise à l'échelle égale) :

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

Parmi eux, tempStep est principalement utilisé pour réaliser la valeur du rapport qui peut être réduite et agrandie lors du défilement. Après cela, j'ai supprimé le style de largeur de l'image, principalement pour permettre le zoom avant ou arrière.

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;

Le paragraphe ci-dessus est relativement simple. Il s'agit principalement de faire défiler l'image de haut en bas pour juger, puis d'agrandir ou de réduire l'image dans des proportions égales. event.preventDefault() peut garantir que la page ne défilera pas pendant le défilement de l'image.

Ci-joint ce plug-in :

Cliquez iciTéléchargez depuis ce site.

Les lecteurs intéressés par davantage de contenu lié à jQuery peuvent consulter les sujets spéciaux sur ce site : "Résumé des effets de glisser et des compétences JQuery", "Résumé des compétences de l'extension jQuery" , "Résumé des effets spéciaux classiques communs de JQuery", "Résumé de l'utilisation des animations et des effets spéciaux jQuery", "Résumé de l'utilisation du sélecteur jquery" et "jQuery plug-ins courants et résumé d'utilisation》

J'espère que cet article sera utile à tous ceux qui programment jQuery.