CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

jQueryを使用してコンテナdiv内の画像をドラッグ/パンする方法は?


mousedown、mouseup、mousemoveなどのイベントを使用して、画像を変換し、ドラッグ効果を作成できます。

次の例は、jQueryを使用して画像を移動する方法を示しています。

<!DOCTYPE html>
<html>
<head>
<style>
#parent{
   position: absolute;
   margin: 20px;
   width: 200px;
   height: 200px;
   border-radius: 25px;
   background-color: khaki;
}
#mover {
   position: relative;
   margin: 10px;
}
</style>
</head>
<body>
<div id=parent>
<img id="mover" src="https://images.unsplash.com/photo-1613333238609-
ef9218f3ddbd?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=100&ixlib=rb1.2.1&q=80&w=100" />
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
let ele = {startPositionX:0,startPositionY:0};
let disp = {x:0,y:0};
$('#parent').on("mousedown",function(e){
   let container = $(this);
   ele.startPositionX=e.pageX-disp.x;
   ele.startPositionY=e.pageY-disp.y;
   $(document).on("mousemove",function(e){
      disp.x=e.pageX-ele.startPositionX;
      disp.y=e.pageY-ele.startPositionY;
      $('#mover').css('transform','scale('+1.0+') translate('+disp.x+'px, '+disp.y+'px)');
   });
});
$(document).on("mouseup",function(){
   $(this).off("mousemove");
});
</script>
</body>
</html>

出力

これにより、次の結果が生成されます-

jQueryを使用してコンテナdiv内の画像をドラッグ/パンする方法は?

ドラッグ

jQueryを使用してコンテナdiv内の画像をドラッグ/パンする方法は?


  1. C ++を使用してOpenCVの画像にテキストを配置するにはどうすればよいですか?

    OpenCVでは、puttext()関数を使用して画像にテキストを入れることができます。この関数はで定義されています ヘッダ。画像にテキストを入れるには、まず画像を読み込むマトリックスを宣言する必要があります。 プログラムに画像をロードする代わりに、マトリックスを白色で塗りつぶしてから、そのマトリックスにテキストを配置します。マトリックス内のテキストの開始点、テキストのフォント、フォントの色、およびフォントの太さを定義する必要があります。 このメソッドの基本的な構文は次のとおりです- 構文 putText(image, "Text in Images", text_po

  2. 画像や動画を使って Google で検索する方法

    Google は、世界中で広く使用されている Web ブラウザーです。キーワードを使用したり、画像や情報に関連する検索結果を取得したりするなどの優れた機能をユーザーに提供します. しかし、あなたがしたい場合 画像や動画を使って Google で検索しますか? キーワードを使用する代わりに、Google で画像や動画を簡単に逆検索できます。今回は、画像や動画を使って Google で簡単に検索できる方法をリストアップしています。 画像や動画を使って Google で検索する 4 つの方法 ユーザーが画像や動画を使用して Google で検索する主な理由は、その特定の画像や動画の出所を知る