シンプルな画像ドラッグ効果を実現する 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設定の詳細な説明
![MySQL データベース テーブルのパーティション分割に関する考慮事項 [推奨]](/upload/images/67caeb39a36ff.webp)
推薦する
CentOS 7 で grub パスワードと単一ユーザー ログインを設定するサンプル コード
Centos7 と Centos6 では、GRUB パスワードの設定手順に大きな違いがあります。これ...
Vue で lodop 印刷コントロールを使用してブラウザ互換の印刷を実現する方法
序文このコントロールを直接印刷すると下部に透かしが入りますが、公式 Web サイトから購入することで...
HTML 基本要約推奨事項 (タイトル)
HTML: タイトル見出しは <h1> - <h6> などのタグによって定...
CentOS 7.9 の zabbix5.0.14 のインストールと設定プロセス
目次1. 基本的な環境設定2. データベースをインストールする3. zabbix関連コンポーネントを...
MySQL インジェクションにおける outfile、dumpfile、load_file 関数の詳細な説明
SQL インジェクション脆弱性を悪用する後期段階では、MySQL のファイル シリーズ関数を使用して...
Tomcat でタイムアウトしたセッションを監視および削除する方法
序文偶然、30 分の Tomcat セッション時間は、セッションが作成された後、30 分間のみ有効で...
MySql 組み込み関数の自習知識ポイントまとめ
文字列関数文字ascii(str)のASCIIコード値をチェックし、strが空の文字列の場合は0を返...
vue-cli4.5.xはプロジェクトを素早く構築します
1. vue-cliをインストールする vue.js で vue.js を実行します。 2. プロジ...
js を使用して XML オンライン エディターを作成する例
目次序文オンラインXMLエディタの必要性テクノロジー事前調査ビジュアルプログラミングVSCODEプラ...
Vue要素のバックグラウンド認証プロセスの分析
序文：最近、プロジェクトで管理システムに遭遇しました。権限設定が非常に興味深いと思いました。自分の学...
異なるインデックスを更新してMySQLのデッドロックルーチンを解決する
前回の記事では、ソース コードを使用してロック関連の情報をデバッグする方法を紹介しました。ここでは、...
vueプロジェクトのマルチ環境設定(.env)の実装
目次マルチ環境構成とは何ですか? また、なぜそれが必要なのですか? .env ファイルはどこで設定さ...
Oracle10パーティションとMySQLパーティションの違いの詳細な説明
一般的に使用される Oracle10g パーティションは、範囲 (範囲パーティション)、リスト (リ...
トランジションコンポーネントのアニメーション効果を使用した Vue サンプルコード
トランジションドキュメントアドレスは、フェードインとフェードアウト効果を実現するための背景ポップアッ...
ECMAScript6 におけるマップマッピングの基本概念と一般的な方法
目次マッピングとは何かオブジェクトとマップの違いマップの共通メソッド宣言と初期化割り当てセットキー値...