シンプルな画像ドラッグ効果を実現する js
|
この記事では、簡単な画像ドラッグ効果を実現するためのjsの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。
// 画像は自分でインポートする必要があります<!doctype html>
<html>
<ヘッド>
<メタ文字セット="UTF-8">
<title>現在の表示領域でクリックできない小さな四角を実現する</title>
<スタイル>
div{位置:固定;幅:100px;高さ:100px;
背景画像:url(images/xiaoxin.gif);
背景サイズ:100%;
}
</スタイル>
</head>
<本文>
<div id="pop"></div>
<スクリプト>
pop = document.getElementById("pop") とします。
// 画像がマウスの動きに追従するかどうかを制御するスイッチ変数を定義します。let canMove = false;
//ドラッグを開始するときに、div の左上隅からのマウスの相対位置を保存します。let offsetX,offsetY;
//マウスがポップ上で押されたとき、pop.onmousedown=function(e){
//ドラッグを開始できます canMove=true;
オフセットX = e.offsetX;
オフセットY=e.offsetY;
}
//マウスがウィンドウ内で移動したとき window.onmousemove=function(e){
//ポップが移動できる場合のみ if(canMove==true){
//ポップをマウスの動きに追従させる //ドラッグを開始すると、すぐにマウスの相対位置を画像の左上隅に取得する //ポップの上部と左側を見つける
left=e.clientX-offsetX とします。
top=e.clientY-offsetY とします。
//ポップの上部と左の属性を設定します。pop.style.left=left+"px";
pop.style.top=top+"px";
}
}
//マウスボタンがポップ時に離されると、pop.onmouseup=function(){
//ドラッグを停止 canMove=false
}
</スクリプト>
</本文>
</html>効果画像:
以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: nginxリバースプロキシwebSocket設定の詳細な説明
推薦する
Docker で Redis クラスターを素早く構築する方法の例
Redis クラスターとはRedis クラスターは、Redis が提供する分散データベース ソリ...
JavaScript ウェブページ入門開発詳細説明
パート3: ❤バックエンドデータ受信を見落とす3つの方法❤ (おすすめ集)パート 2: Web フォ...
Vue3 コンパイルプロセス - ソースコード分析
序文： Vue3 がリリースされてからかなり経ちますが、最近、会社のプロジェクトでVue3 + Ty...
MySQL 8.0.17 winx64 (Navicat 付き) 手動構成バージョンのインストール チュートリアル図
1. ダウンロードアドレス: mysql-8.0.17-winx64ダウンロードして解凍する2. フ...
値の転送を実現するために、2つの同じレベルのコンポーネントをVueで作成します。
Vue コンポーネントは接続されているため、コンポーネント間で値を渡す必要があるのは避けられません...
Vueコンポーネントの再利用と拡張の詳細な説明
目次概要延長は必要ですか？スロットJavaScript ユーティリティ関数拡張コンポーネントの複数の...
Windows 10 サブシステム Ubuntu (WSL) に Docker をインストールするチュートリアル (画像とテキスト付き)
目次環境説明Windows 10 に Docker for Windows をインストールするWin...
HTML 再利用テクニック
HTML の再利用は、あまり話題に上らない言葉です。今日は、この問題を次のようにまとめたいと思います...
JS の Promise に中止関数を追加する方法
目次概要プロミスレースメソッド約束の再パッケージ化中止コントローラAxiosプラグインにはキャンセル...
Typescriptの基本構文13個を共有する
目次1. Tsとは何か2. 基本的な文法1. プリミティブデータ型を宣言する2. オブジェクト型を宣...
Docker が MySQL を作成する説明
1. MySQLイメージをダウンロードするコマンド: docker pull mysql 2. コン...
DIV共通属性コレクション
1. 物件リストコードをコピーコードは次のとおりです。色: #999999 テキスト色フォントファミ...
JSでHTML本文のスタイルを変更する
目次1. 本来の定義2. JS操作、幅の変更を例に3. 効果: 幅が変更されました 1. 本来の定義...
CSS3で作成した画像スクロール効果
成果を達成する実装コードhtml <base href="https://s3-us...
Vue で jsx 構文を正しく使用する方法
目次序文仮想DOM仮想DOMとは仮想DOMの利点レンダリング関数とは何ですか? jsx Vue3 で...