この記事では、ログインボックスのドラッグ効果を実現するための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 ウェブサイト構成コード例を実装します
目次1. CentOS7+MySQL8.0、yumソースインストール2. MySQLにログインしてパ...
この記事では、例を使用して MySQL コマンドライン スクリプトの実行について説明します。ご参考ま...
MySQL には読み取りと書き込みを分離するアーキテクチャが多数あります。Baidu のそれらのほと...
目次1. スワップパーティション SWAP 1.1 スワップファイルを作成する1.2 スワップパーテ...
目次目的npm init および package.json ファイルモジュールのインストールと管理モ...
目次背景質問問題分析と解決策新たな問題問題分析と解決策背景node-schedule スケジュール ...
データベース接続のURLの詳細な説明と概要JDBC URL = プロトコル名 + サブプロトコル名 ...
この記事の例では、ボタンをクリックすることで画像を切り替えることを実現するJavaScriptの具体...
この記事では、Vueの具体的なコードを共有して、シンプルなマーキー効果を実現しています。具体的な内容...
目次1. 計算プロパティ構文: 1. 省略形:文法: 2. 文章を完成させる: 2. モニタリング(...
序文ご存知のとおり、Linux は ext4、ext3、ext2、sysfs、securityfs、...
成果を達成するまずHTMLを使って基本的なフレームワークを構築します <本文> <...
まずJDKをダウンロードします。ここではjdk-8u181-linux-x64.tar.gzを使用し...
目次序文: 1. コンセプト2. モジュール化の利点3. 複数のスクリプトタグを導入した後の問題1....
目次序文プロミスチェーンMDN エラー連鎖デフォルト処理略語非同期待機序文この記事を書いた理由は、ユ...