マウスで画像を動かすJavaScript
|
この記事では、マウスの動きに追従する画像を実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。 実装のアイデア1. ドキュメントにmousemoveイベントをバインドし、マウスの座標を取得します: e.pageX、e.pageY ヒント: e.clientX - ブラウザウィンドウの表示領域を基準としたマウスのX軸座標を取得します。 例コード例:
<!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>
<スタイル>
画像 {
/* 幅: 80px;
高さ: 90px; */
位置: 絶対;
}
</スタイル>
</head>
<本文>
<img src="images/斑.png" alt="">
<スクリプト>
var img = document.querySelector('img');
document.addEventListener('mousemove', 関数(e) {
var x = e.pageX;
var y = e.pageY;
img.style.top = y - 40 + 'px';
img.style.left = x - 48 + 'px';
})
</スクリプト>
</本文>
</html>ページ効果:
以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Centos は chrony 時間同期サーバー プロセス図を構築します
>>: プロフェッショナルなMySQL開発設計仕様とSQL記述仕様
推薦する
MySQL でスロークエリを有効にする方法の例
序文スロー クエリ ログは、MySQL で非常に重要な機能です。MySQL のスロー クエリ ログ機...
Javascript 仮想 DOM の詳細な説明
目次仮想DOMとは何ですか?なぜ仮想DOMが必要なのでしょうか?仮想 DOM はどのようにして実際の...
シンプルなページカウントダウンを実現するJavaScript
この記事では、参考までに、シンプルなページカウントダウンを実装するためのJavaScriptの具体的...
MySQLトランザクションが効率に与える影響の分析と概要
1. データベース トランザクションによりデータベースのパフォーマンスが低下します。データの一貫性と...
Nuxt.jsプロジェクトのDockerデプロイメントの実装
Docker 公式ドキュメント: https://docs.docker.com/ Docker は...
画像カルーセルを実装するためのネイティブJS 小さな広告プラグインを実装するためのJS
最近、ネイティブ JS を使用して、さらにいくつかの小さな機能を実装したいと思っています。現在、ブロ...
Vueスロットの使用の詳細
目次1. スロットを使用する理由1.1 スロット1.2 コンポーネントのスロット1.3 例2. この...
VMware に CentOS7 をインストールし (静的 IP アドレスを設定)、Docker コンテナ経由で mySql データベースをインストールする (非常に詳細なチュートリアル)
2 年生から、これらのインストールと設定の仕方を尋ねられました。簡単なチュートリアルを作成し、ここ...
dockerでopenGaussデータベースを構成する方法の詳細な説明
Windowsユーザー向けDocker で openGauss を使用するopenGaussイメージ...
MySQLインデックスが失敗するいくつかの状況の分析
1. 最左プレフィックス原則 - 複数の列にインデックスが付けられている場合は、最左プレフィックス原...
ホワイトボードを踏まないようにするゲームを実装するための HTML+CSS+JS
目次背景1. 思考分析2. ページ構成2.1 HTML レイヤー2.2 CSS レイヤー2.3 JS...
LinuxベースのSelenium環境を構成し、操作を実装する
1. Linux で Selenium を使用する1. Chromeをインストールする次のコマンドを...
Linuxにgitをインストールする方法
1. はじめにGit は、規模の大小を問わずあらゆるプロジェクトを俊敏かつ効率的に処理するために使用...
MySql 8.0 と対応するドライバー パッケージの一致に関する注意事項
MySql 8.0 対応ドライバパッケージのマッチングMySql データベースをバージョン 8.0 ...
Angularの動的コンポーネントの詳細な説明
目次使用シナリオ達成方法1. 動的コンポーネントを配置する場所2. コンポーネントのインスタンスを取...