この記事では、フリーウィンドウのマウス制御を実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。 コード: <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>マウスでウィンドウを移動しました</title> <スタイル> .mainDiv { 幅: 350ピクセル; 高さ: 200px; 境界線: 2px 黒実線; 位置: 絶対; } .titleDiv { 幅: 350ピクセル; 高さ: 30px; 背景色: 黄緑; テキスト配置: 中央; 行の高さ: 30px; } .contentDiv { 幅: 350ピクセル; 高さ: 170ピクセル; 背景色: SandyBrown ; テキスト配置: 中央; } </スタイル> </head> <本文> <!--onmousedown: マウス ボタンが押されたときにイベントが発生します。onmousemove: マウス ポインターが指定されたオブジェクトに移動したときにイベントが発生します --> <div class="mainDiv" id="mainDiv" style="上: 20px;左: 20px"> <div class="titleDiv" id="titleDiv" onmousedown="mouseDown()" onmouseup="mouseUp()"> タイトルバー</div> <div class="contentDiv"> 《マウスで操作できるフリーウィンドウ》<br> 注意: MainDiv は、位置が絶対位置に設定されるまで移動できません</div> </div> <スクリプト> var dx; var dy; var mainDivObj = null; var titleDivObj = null; /** * マウス押下関数、マウスが押されたときにこの関数を実行します*/ 関数mouseDown() { //マウスボタンの値を取得します。0 はマウスの左ボタン、1 はマウスのスクロールボタン、2 はマウスの右ボタンです。if (event.button == 0) { mainDivObj = document.getElementById("mainDiv"); titleDivObj = document.getElementById("titleDiv"); //マウス スタイルを設定します titleDivObj.style.cursor = "move"; //メイン div の影のスタイルを設定します mainDivObj.style.boxShadow = "0px 0px 10px #000"; //マウスの現在の座標を取得します。let x = event.x; y = event.y とします。 dx = x - parseInt(mainDivObj.style.left); dy = y - parseInt(mainDivObj.style.top); } } //マウスが移動したときに呼び出します document.onmousemove = mouseMove; /** * マウスを押すと関数が移動します。マウスが移動すると、divを移動する関数が実行されます。 */ 関数mouseMove() { mainDivObj != null の場合 { //現在のマウスの動きの座標位置を取得します。let x = event.x; //マウスの動きの x 軸座標 let y = event.y; //マウスの動きの y 軸座標 //移動後の div の左と上との距離を計算します //現在の座標を使用して、div 内のマウスの位置と div の左と上との距離を減算します。let left = x - dx; top = y - dyとします。 //div の新しい座標位置を設定します。mainDivObj.style.left = left + "px"; mainDivObj.style.top = top + "px"; } } /** * マウスリリース関数、マウスがリリースされたときにこの関数が実行されます*/ 関数 mouseUp() { mainDivObj != null の場合 { dx = null; dy = null; //div の影のスタイルを設定します mainDivObj.style.boxShadow="none"; mainDivObj = null; titleDivObj.style.cursor="ポインター"; titleDivObj = null; } } </スクリプト> </本文> </html> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: CentOS 6.8 での Hadoop 3.1.1 完全分散インストール ガイド (推奨)
#include <asm/io.h> #define ioremap(cookie,...
Linux でファイルを見つけたいのに、その場所がわからないことがよくあります。次のコマンドを使用し...
序文リアルタイムのデータベース バックアップの必要性は非常に一般的です。MySQL 自体はレプリケー...
目次実装のアイデアアカウント パスワードを保存する方法は 3 つあります。機能インターフェースアカウ...
目次DockerのインストールNvidia-docker のインストールDockerのインストール1...
以前は、Web ページのプリンタ対応バージョンを作成するには、印刷したときに見栄えがよくなるようにレ...
序文常にエラーが発生するため、MySQL データベースに接続するプロセスを記録します。接続プロセス1...
Docker インストール (Alibaba Cloud Server) Docker 公式 Ce...
目次splice() メソッドjoin() メソッド逆() メソッドevery() メソッド削減()...
Nexus のデフォルトのリモートリポジトリは https://repo1.maven.org/ma...
問題の説明Ele.me UI のフレームワークでは、入力データは el-form であり、出力データ...
みなさんこんにちは。私は技術の話ばかりして髪を切らない先生のトニーです。何らかの歴史的な理由や誤操作...
チェックボックスやラジオボタンの使用を含むコードをコピーコードは次のとおりです。 <!DOCT...
操作効果: html <!-- この要素は表示されません。DOM は JavaScript に...
序文多くのサイトが、ポイントやゴールドコインなど、情報のダウンロードに料金を請求していることは誰もが...