この記事では、ログインボックスのドラッグ効果を実現するためのJavascriptの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 需要分析1. ポップアップログインボックスをクリックします 2. ログインボックスをログインボックスの特定の領域内の任意の位置にドラッグできます 3. ログインボックスを閉じると、次回クリックしたときにポップアップログインボックスが元の位置に戻ります。 具体的な実装完全なコード <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta http-equiv="X-UA-compatible" content="IE=edge"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <title>ドキュメント</title> <スタイル> * { パディング: 0; マージン: 0; } { テキスト装飾: なし; 色: 黒; } .ログインヘッダー{ /* margin: 0 auto; */ /* これを動作させるには幅を設定する必要があります*/ 高さ: 30px; 行の高さ: 30px; フォントサイズ: 24px; テキスト配置: 中央; } 。ログイン { 幅: 500ピクセル; 高さ: 300px; 位置: 絶対; 境界線: #725252 実線 1px; /* 変換: translate(-50%,-50%); */ 左: 50%; 上位: 50%; /* ここではマージンが存在できません。左と右のみを変更したため、移動後にマージンが再び有効になり、失敗が発生します*/ /* 左余白: -250px; 上マージン: 50px; */ 背景色: 貝殻; 変換: translate(-50%, -50%); zインデックス: 9999; ボックスシャドウ: 0 0 30px 黒; 表示: なし; } .ログインタイトル{ 位置: 相対的; マージン: 20px 0 0 0; 高さ: 40px; 行の高さ: 40px; テキスト配置: 中央; フォントサイズ: 20px; カーソル: 移動; } .close-btn { 位置: 絶対; 幅: 30ピクセル; 高さ: 30px; 右: -15px; 上: -35px; 境界線の半径: 50%; 背景色: #ffffff; 行の高さ: 30px; } .ログインコンテンツ{ マージン: 15px 自動; 幅: 450ピクセル; 高さ: 230px; } .ログイン入力ラベル{ 上マージン: 20px; 左マージン: 30px; 幅: 100ピクセル; テキスト配置: 右; 高さ: 30px; 行の高さ: 30px; 表示: インラインブロック; } .ログイン入力入力{ 高さ: 30px; 幅: 230ピクセル; 境界線の半径: 10px; 境界線: 1px実線 rgba(0, 0, 0, .5); } .ログインボタン{ 幅: 100ピクセル; 高さ: 50px; マージン: 30px 自動; 境界線: 1px 黒一色; 境界線の半径: 7px; 行の高さ: 50px; テキスト配置: 中央; } </スタイル> </head> <本文> <div class="login-header"><a href="javascript:;" >ログインポップアップログインボックス</a></div> <div class="ログイン"> <div class="login-title">ログイン<span><a href="javascript:;" class="close-btn">x</a></span> </div> <div class="ログインコンテンツ"> <div class="ログイン入力"> <label for="name">アカウント:</label> <input type="text" id="名前"> </div> <div class="ログイン入力"> <label for="pwd">ログインパスワード:</label> <input type="password" id="pwd"> </div> <div class="login-btn">ログイン</div> </div> </div> <スクリプト> 出力 = document.querySelector('.login-header'); login_box を document.querySelector('.login') とします。 title = document.querySelector('.login-title'); とします。 close = document.querySelector('.close-btn'); とします。 document.querySelector('.login-content') を移動します。 out.addEventListener('click',function() { login_box.style.display = 'ブロック'; }); close.addEventListener('click',function() { login_box.style.left = 50 + '%'; login_box.style.top = 50 + '%'; login_box.style.display = 'なし'; }); /* タイトルのみ移動できます */ title.addEventListener('mousedown',function(e) { /* マウスが押された瞬間のタイトル内のマウスの距離を計算し、次のマウスの押下まで変更せずに保持します*/ /* ここで login_box のオフセットを使用する必要があります。これは、title の前に絶対位置の login_box があり、そのオフセットが 0 であるためです */ mousex = e.pageX - login_box.offsetLeft とします。 mousey = e.pageY - login_box.offsetTop とします。 console.log(マウスのex、マウスのy); /* ここでタイトルではなくドキュメントが使用されているのはなぜでしょうか。その理由は、マウスの動きが速すぎてタイトルの範囲を超えてしまう可能性があるためです。もう 1 つの理由は、タイトル ボックスがブロックされるのを防ぐためです。マウスがタイトル上にない場合は、移動およびキャンセル イベントをトリガーできないため、無効にすることはできません。*/ 関数movee(e) { login_box.style.left = e.pageX - mousex + 'px'; login_box.style.top = e.pageY - mousey + 'px'; } document.addEventListener('mousemove', 移動先) document.addEventListener('mouseup',function() { document.removeEventListener('mousemove', 移動先) }) }); </スクリプト> </本文> </html> ポップアップログインボックスの実装方法 JavaScript クリックイベントを使用し、ポップアップがクリックされたときにログインボックスの表示をブロック解除するように設定します。 out.addEventListener('click',function() { login_box.style.display = 'ブロック'; }); 抗力効果の実装 ドラッグ効果の実装は、次の 3 つのステップに分かれています。
1. マウスを押してログインボックス内のマウスの座標を取得します ログイン ボックス内のマウスの位置を取得するにはどうすればよいでしょうか。ここでは、ページ内のマウスの座標からログイン ボックスの左余白を引いた値を使用します。 上の図から、ログイン ボックス内のマウスの座標は次のようになります: (x, y) = (page X − offsetLeft, Page Y − offsetTop) (x,y) = (pageX - offsetLeft, PageY - offsetTop) (x,y) = (pageX−offsetLeft, PageY−offsetTop) /* マウスが押された瞬間のタイトル内のマウスの距離を計算し、次のマウスの押下まで変更せずに保持します*/ /* ここで login_box のオフセットを使用する必要があります。これは、title の前に絶対位置の login_box があり、そのオフセットが 0 であるためです */ mousex = e.pageX - login_box.offsetLeft とします。 mousey = e.pageY - login_box.offsetTop とします。 2. マウスを動かしてログインボックスの位置を確認します この時点では、ログイン ボックス内のマウスの位置は、マウスを離すまで変化しません。この機能を使用して、ログイン ボックスの現在の位置を取得できます。つまり、ページ上のマウスの座標からページ上のマウスの座標を引いた値です。ここではこれ以上の説明はしません。 /* ここでタイトルではなくドキュメントが使用されているのはなぜでしょうか。その理由は、マウスの動きが速すぎてタイトルの範囲を超えてしまう可能性があるためです。もう 1 つの理由は、タイトル ボックスがブロックされるのを防ぐためです。マウスがタイトル上にない場合は、移動およびキャンセル イベントをトリガーできないため、無効にすることはできません。*/ 関数movee(e) { login_box.style.left = e.pageX - mousex + 'px'; login_box.style.top = e.pageY - mousey + 'px'; } document.addEventListener('mousemove', 移動先) 3. マウスを離してマウス移動イベントをキャンセルします document.addEventListener('mouseup',function() { document.removeEventListener('mousemove', 移動先) }) ログインボックスを閉じて元の位置に戻ります 表示を「なし」に設定するだけです。詳細についてはコードを参照してください。 close.addEventListener('click',function() { login_box.style.left = 50 + '%'; login_box.style.top = 50 + '%'; login_box.style.display = 'なし'; }); エフェクト表示コードを実装する際に遭遇した困難 1. marginを使用して中央に配置する場合は、 widthが必要です。長い間コードを書いていなかったので、忘れてしまいました。 マウスの動きが速すぎて正しく処理されないのを防ぐために、イベントはドキュメントにバインドされます。ログイン ボックスが絶対位置に配置されていない場合、移動プロセス中に他の要素によってブロックされる可能性があるため、移動イベントはログイン ボックスではなくドキュメントにバインドされます。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Nginx は https ウェブサイト構成コード例を実装します
概要Docker 自体の現在のデフォルト ネットワークについては、単一ホスト上の異なる Docker...
目次リストレンダリングキーの原理と機能主要原則の分析キーの役割要約するリストレンダリングキーの原理と...
1. イメージをプルするdocker pull レジストリ.cn-hangzhou.aliyuncs...
序文データベースは常に私の弱点でした。自分の経験 (python+sqlalchemy) を組み合わ...
前回の記事では、HTML ページが 3 秒後に自動的にジャンプする一般的な 3 つの方法を紹介しまし...
質問:最近、プロジェクトを展開すると文字化けしたデータが出てきました。確認したところ、プロジェクトは...
序文休日は終わっていますが、それは別の形で(お腹に触れることで)私たちに現れます。ミニプログラムでデ...
SASS を使用する開発者が増えるにつれて、SASS コードの数に注意する必要があります。 SASS...
この記事では、簡単な虫眼鏡効果を実現するためのjsの具体的なコードを参考までに共有します。具体的な内...
目次意味文法例1. 初期値initが渡されない2. 初期値を渡す場合3. アレイの重複排除4. Re...
1. VMware Workstation 上の Linux: 1. ソースの更新(オプション) v...
Web ページ制作では、input と img が同じ行に配置されることが多く、img タグが常に ...
バントリストコンポーネントをスクロールするときに、スクロールバーの位置が保持されます。これは、kee...
01. VMware Workstation Pro 15 のダウンロードダウンロード: VMwa...
XHTMLの img タグは、次のように記述する必要があります: <img alt="...