マウスで画像を動かす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記述仕様
推薦する
Dockerのyumソースの設定とCentOS7へのインストールの詳細な説明
ここではCentOS7が使用されており、カーネルバージョンは [root@localhost ~]#...
ウェブページをデザインするには？ウェブページを作成するには？
Web デザインの理解に関しては、多くの人がまだ Web ページ制作のレベルにとどまっているようで...
MySQL スケジュール バックアップ ソリューション (Linux crontab を使用)
序文この世の愛には値段のつくものもありますが、データには値段のつけられないものがあります。将来、誤っ...
vue3 を使用したジグソーパズルゲームのリファクタリングの例
序文プロジェクト内のパズルゲーム（デジタル華容路とも呼ばれる）を再構築するのに 2 日かかりました。...
バックエンドの権限に基づいてナビゲーション メニューを動的に生成する Vue-router のサンプル コード
目次js の1. グローバルガードを登録する2. Vuex 状態管理グローバルキャッシュルート3. ...
MySQLのデッドロックチェック処理の通常の方法
通常、デッドロックが発生すると、重みが最も小さい接続が強制終了され、ロールバックされます。ただし、最...
JavaScript が Taobao の虫眼鏡効果を模倣
この記事では、淘宝虫眼鏡効果を実現するためのJavaScriptの具体的なコードを参考までに紹介しま...
Linux で FTP イメージ サーバーをインストールして展開する方法
Linux で FTP サーバーを設定するためのチュートリアルを参照してください https://w...
ウェブサイト上で flv/MP4 やその他のビデオ ファイルを再生できない問題は、MIME タイプに関連しています。
ウェブサイトを作成している際に、flv や MP4 形式などのビデオ ファイルはローカルでは正常に再...
div間のギャップの解決策
HTMLのdivブロックを使用していて、ブロックの中央をしっかりと接続できず、解決できない場合1. ...
MySQL全文インデックスを使用して検索エンジンのサンプルコードの簡易版を実現する
序文全文インデックスを使用できるのは Innodb と MyISAM ストレージ エンジンのみです ...
HTML内の画像はbase64でエンコードされた文字列に直接置き換えられます
最近、画像はあるのに外部画像リソースが参照されていないウェブページを見つけました。気になりました。コ...
Kylin 4.0.2 (Ubuntu) でブート パーティションを拡張するプロセスの紹介
目次序文1. 新しいパーティションを準備する2. ブートパーティションをコピーする3. fstabフ...
設定ファイルを書いてMyBatisを簡単に使う方法
設定ファイルを書いてMyBatisを簡単に使う方法マイバティス3.xここでは MyBatis につい...
Vant Uploaderは1枚以上の写真をアップロードするコンポーネントを実装します
この記事では、1枚以上の写真をアップロードするためのVant Uploaderコンポーネントを紹介し...