jQuery はマウスをスクロールすることで画像を拡大・縮小する方法を実装します (デモのソースコードのダウンロード付き)_jquery

この記事の例では、jQuery がマウスのスクロールを実装して画像を拡大および縮小する方法を説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

プロジェクトの制作過程でそのようなニーズに遭遇したので、開発して記録しました。

まず、HTML 要素と 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>

このスタイルでは、画像スタイルを 670px に設定しています。これは、画像が大きすぎる場合にページの外に表示されるのを防ぐためです。

次に、jquery マウスホイール プラグインを使用して、マウスの中ボタンのスクロールの問題を解決しました。以下は、特定の 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>

このコードでは、originalEvent 関数を使用してマウスの位置を取得します。これは、IE9 および 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

次に、コード内で次の操作を実行して、画像の初期の高さと幅、および画像表示のアスペクト比を決定しました (目的は、均等なスケーリングを実現することです):

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

このうち、tempStepは主にスクロール時の縮小と拡大の比率値を実現するために使用されます。これを行った後、主にズームインまたはズームアウトできるようにするために、画像の幅スタイルを削除しました。

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;

上記の段落は比較的単純で、主に上下にスクロールして判断し、画像を同じ比率で拡大または縮小します。 event.preventDefault() を使用すると、画像のスクロール中にページがスクロールしないようにできます。

次のプラグインが添付されています:

ここをクリックしてください

このサイトからダウンロードしてください。

さらに jQuery 関連のコンテンツに興味のある読者は、このサイトの特別トピック「

JQuery ドラッグ効果とスキルの概要」、「jQuery 拡張機能のスキルの概要」をチェックしてください。 、「jQuery共通古典特撮まとめ」、「jQueryアニメーション・特撮使い方まとめ」、「jQueryセレクター使い方まとめ」、「jQuery」一般的なプラグインと使い方のまとめ》

この記事が jQuery プログラミングのすべての人に役立つことを願っています。