マウスで画像を動かす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記述仕様
推薦する
JavaScriptカスタムオブジェクトメソッドの概要
目次1. オブジェクトを使用してオブジェクトを作成する2. コンストラクタを使用してオブジェクトを作...
組み込みオブジェクトに関するJavascriptの基礎
目次1. 組み込みオブジェクトの紹介1.1 数学オブジェクト1.2 数学における方法1.3 日付オブ...
GoogleとFacebookがDockerを使わない理由
この記事を書いた理由は、修正した分散 PyTorch プログラムを Facebook のクラスター上...
MySQL 5.7.20 無料インストールバージョンの設定方法グラフィックチュートリアル
インターネット上で多くの関連チュートリアルを見てきましたが、インストール プロセスにはまだいくつかの...
CSS3で実装されたサムネイルホバー効果
成果を達成する実装コードhtml <ヘッダー> <h1><em>...
CSS ファイルをインポートする 4 つの方法 (インライン、インライン、外部、インポート) の詳細な説明
CSS インポート方法 - インラインスタイルタグ属性を通じて、CSSのキーと値のペアがタグに直接書...
MySQL のロック待機とデッドロック問題の分析
目次序文： 1. ロック待機とデッドロックを理解する2. 現象の再発と治療要約:序文： MySQL ...
Linux /etc/network/interfaces 設定インターフェース方法
Linux の /etc/network/interfaces ファイルは、ネットワーク インターフ...
Workermanはmysql接続プールのサンプルコードを書きます
まず、接続プールを使用する理由と、接続プールによってどのような問題が解決できるかを理解する必要があり...
カルーセルの制作方法を実現するjs
この記事では、カルーセル画像の表示を実現するためのjsの具体的なコードを参考までに共有します。具体的...
Win10 に Linux ubuntu-18.04 デュアル システムをインストールする (インストール ガイド)
コンピューターに Linux Ubuntu システムをインストールしました。初めてインストールしまし...
CSSポジションの5つの異なる値の使い方の詳細な説明
位置プロパティposition プロパティは、要素に使用する配置方法のタイプ (静的、相対的、固定、...
src 属性と href 属性の違い
src と href には違いがあり、混同される可能性があります。 src は現在の要素を置き換える...
JS 1次元配列を3次元配列に変換する例
今日、CSDN の Q&A セクションで友人が質問をしているのを見ました。彼は 1 次元配列...
Vuex環境の詳細な説明
目次Vuex環境を構築する要約するVuex環境を構築するsrcディレクトリにフォルダstoreを作成...