マウスで画像を動かす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記述仕様
推薦する
XHTML と CSS によるオブジェクト指向プログラミング
<br />XHTML と CSS がオブジェクト指向だったらよかったのに。 。太陽は北...
Vue elementUI はツリー構造テーブルと遅延読み込みを実装します
目次1. 成果を達成する2. バックエンドの実装2.1 エンティティクラス2.2 データベース内のデ...
IE5.0以降のHTCコンポーネントの定義の概要
Microsoft IE 5.0 がリリースされる前は、Web プログラミングにおける最大の課題は、...
Vueは単一ファイルコンポーネントの完全なプロセス記録を実装します
目次序文単一ファイルコンポーネント基本概念シンプルなローダーコンポーネントコンテンツの解析コンポーネ...
純粋なCSSで立体的な画像配置効果を実現するサンプルコード
1. 要素の幅/高さ/パディング/マージンのパーセンテージ基準要素の幅/高さ/パディング/マージンの...
Dockerが新しいイメージをロードした後にリポジトリとタグ名が両方ともnoneになる問題を解決する
次のコマンドを使用できます: docker tag [イメージID] [名前]:[バージョン]例えば...
jQuery+h5 で 9 マス抽選特殊効果を実現 (フロントエンドとバックエンドのコード)
序文：フロントエンド: jq+h5 で 9 グリッドのダイナミック効果を実現バックエンド: thin...
VueにExcelテーブルプラグインを導入する方法
この記事では、Excelテーブルプラグインを導入するVueの具体的なコードを参考までに共有します。具...
MySQLデータベースのパスワードを忘れた場合の解決策
先ほど MySQL パスワードを設定したのに、外食したり荷物を受け取ったりするときにパスワードを忘れ...
CSS が複数のクラスに一致する方法のサンプルコード
CSSは複数のクラスにマッチする次の HTML タグ li、クラスはオープン スタイルです。私の要件...
ウェブサイトはいつ広告を掲載すべきでしょうか?
最近、インターネットのベテランと「広告」について議論したのですが、彼から非常に興味深い意見を聞きまし...
MySQL での coalesce() の使用に関するヒントのまとめ
序文最近、偶然 MySQL の coalesce を発見しました。ちょうど時間があったので、MySQ...
1 時間で MySQL データベースを学ぶ (Zhang Guo)
目次1. データベースの概要1.1 開発の歴史2. MySQL の紹介2.1. MySQLの概要2....
XHTML チュートリアル、XHTML の基礎を簡単に紹介します
<br />この記事では、XHTMLとXHTMLの基礎知識について簡単に紹介します。 X...
jQueryはネストされたタブ機能を実装します
この記事では、ネストされたタブ機能を実装するためのjQueryの具体的なコードを参考までに紹介します...