問題
9
jQuery
マウスストーカーを作ろう！
jQueryの問題に挑戦しよう！
問題
「マウスストーカーを作ろう！」
今回はマウスストーカーを作ってみましょう！マウスストーカーとはその名の通りマウスを追いかけてくる物体のことです。今回デモではみんな大好きなお金がついてくるようにしました。
あらかじめエディタに書くコード
<a href=">リンク</a>
<a href=">リンク</a>
<a href=">リンク</a>
<div class="cursor">￥</div>
¥HTML¥
html{
position: relative;
cursor: none;
border: 2px solid black;
}
body a:hover{
cursor: none;
}
.cursor{
position: fixed;
width: 30px;
height: 30px;
z-index: 99999;
pointer-events: none;
}
¥CSS¥
期待する画面
解答と解説（マウスストーカーを作ろう！）
解説
LINE登録して解答を見る
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
今回cssの方は問題にしませんでしたが、勉強になると思うのでちゃんと確認しておいてくださいね。では本題ですが、mousemoveをトリガーにしてfunctionの引数をeとし、e.clientX、e.clientYでそれぞれX軸方向、Y軸方向の距離を得られます。それをcursorのtop、leftにそれぞれpxをつけてcssを与えてあげれば完成です。
