マウスで画像を動かす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記述仕様
推薦する
Linux に MySql 5.7.21 をインストールするための詳細な手順
序文Linux で最も広く使用されているデータベースは MySQL です。この記事では、Linux ...
MySQL ストアド プロシージャの作成、呼び出し、管理の詳細な説明
目次ストアドプロシージャの概要ストアド プロシージャを使用する理由は何ですか?ストアドプロシージャの...
Linux ディスク パーティションの実装の原理と方法の分析
覚えて： IDE ディスク: 最初のディスクは hda、2 番目のディスクは hdb...最初のディ...
Nginx10m+の高並列カーネル最適化に関する簡単な説明
高い同時実行性とは何ですか?デフォルトの Linux カーネル パラメータは、最も一般的なシナリオ向...
CentOS7 64ビットインストールmysqlグラフィックチュートリアル
MySQL をインストールするための前提条件: CentOS 7 64 ビットをインストールし、Ce...
テーブルの4辺を上下左右にスクロールするように固定する方法
質問：最近、プロジェクトの統計を行っていたときに、テーブルを上下にスクロールしたときにテーブルの先頭...
NginxにLuaモジュールを追加する方法
luaをインストールする http://luajit.org/download/LuaJIT-2.0...
Nginx Rewrite の使用シナリオとコード例の詳細な説明
Nginx Rewriteの使用シナリオ1. URL アドレスジャンプ。たとえば、ユーザーが pm....
MySQL 同時実行制御の原則に関する知識ポイント
Mysql は、高性能なデータ ストレージ サービスを提供する主流のオープン ソース リレーショナル...
Vue.js を学ぶ際に遭遇する落とし穴
目次クラス void のポイントES6 矢印関数ヴュートファイvue-cli非同期と同期実行と展開ヒ...
MySQL テーブルにはどのくらいの量のデータを保存できますか?
プログラマーは MySQL を扱う機会が多く、毎日触れているとも言えますが、MySQL テーブルには...
JavaScript axiosのインストールとパッケージ化のケースの詳細な説明
1. axiosプラグインをダウンロードする cnpm インストール axios -S 2. mai...
Nginx 構成 80 ポート アクセス 8080 とプロジェクト名アドレス メソッド分析
Tomcatはプロジェクトにアクセスします。通常はIP + ポート + プロジェクト名です。 Ngi...
Linuxホスト名変更コマンドの詳しい説明
Linux ホスト名変更コマンド1. ホスト名を一時的に変更するだけの場合は、hostname コマ...
Vue echarts は水平棒グラフを実現します
この記事では、水平棒グラフを実現するためのvue echartsの具体的なコードを参考までに共有しま...