jQueryはマウスドラッグ画像機能を実装します

この例では、jQuery を使用してマウスドラッグイメージ機能を実装します。

まず、ラッパーを設定します。ラッパー内の座標が画像の移動の座標となります。

 #ラッパー{
      幅: 1000ピクセル;
      高さ:1000ピクセル;
      位置:相対;
    }

ドラッグするdivである画像divを設定します

#div1{
      位置: 絶対;
      左:0px;
      上:0px;
      幅: 300ピクセル;
      高さ: 200px;
      背景: url("d:/Pictures/Earth.jpg");
      背景サイズ:contain;
    }

上記は、ラッパーの位置を相対的に設定し、div1 の位置を絶対的に設定しています。

次に、ドラッグアルゴリズムを設計します。

考え方は次のとおりです。

1. マウスがクリックされたときにdivがマウスに追従するようにする

2. マウスを離したら追跡を停止する

まず、div の座標を現在のマウスの位置に変更する関数が必要です。

まず、現在のマウス座標と画像座標を保存するためのいくつかの変数を定義する必要があります。

  var タイマー;
      var マウスX = 0;
      var マウスY = 0;
      var pic_width = parseInt($("#div1").css("width")); 
      var pic_height = parseInt($("#div1").css("height"));

ここで、ラッパーにイベントリスナーを追加する必要があります。マウスがラッパー内で移動すると、変数 mousex と mousey の値が変更されます。

$("#wrapper").mousemove(function(e){
        マウスX = e.clientX;
        マウスY = e.clientY;
      });

フォロー関数を書いてタイマーで呼び出す

$("#div1").mousedown(関数(){
        タイマー=setInterval(follow,10);
      });
      $("#div1").mouseup(関数(){
        タイマーの間隔をクリアします。
      });
      var follow = 関数(){

        $("#div1").css("左",mouseX-pic_width/2);
        $("#div1").css("top",mouseY-pic_height/2);
      };

完全なコードは次のとおりです。

<!doctypehtml>
<html>
  <ヘッド>
    <スクリプト タイプ = "text/javascript" src = "jquery.js"></script>
    <スタイル タイプ = "text/css">
    #ラッパー{
      幅: 1000ピクセル;
      高さ:1000ピクセル;
      位置: 相対的;
      背景: 線形グラデーション(ライトブルー、ホワイト);
      フォントサイズ: 40px;
    }
    #div1{
      位置: 絶対;
      左:0px;
      上:0px;
      幅: 300ピクセル;
      高さ: 200px;
      背景: url("d:/Pictures/Earth.jpg");
      背景サイズ:contain;
    }
    </スタイル>
  </head>
  <本文>
    <div id = "ラッパー">
      正直に言うと、私は悲しんでいます。私はただ、愛と非難を表明し、私はただ、あなたが失ったことと、あなたが亡くなったことを悔い改めているだけです。
      <div id = "div1">

      </div>
    </div>
    
    
    <スクリプト>
      
      var タイマー;
      var マウスX = 0;
      var マウスY = 0;
      var pic_width = parseInt($("#div1").css("width")); 
      var pic_height = parseInt($("#div1").css("height")); 

      
      $("#wrapper").mousemove(function(e){
        マウスX = e.clientX;
        マウスY = e.clientY;
      });

      $("#div1").mousedown(関数(){
        タイマー=setInterval(follow,10);
      });
      $("#div1").mouseup(関数(){
        タイマーの間隔をクリアします。
      });
      var follow = 関数(){

        $("#div1").css("左",mouseX-pic_width/2);
        $("#div1").css("top",mouseY-pic_height/2);
      };
    </スクリプト>
  </本文>
</html>

最終結果:

jQuery を使用してマウスで画像をドラッグする方法についての記事はこれで終わりです。jQuery を使用してマウスで画像をドラッグする方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: