jQueryAnimation
Googleでログイン
問題9：マウスストーカーを作ろう！
今回はマウスストーカーを作ってみましょう！マウスストーカーとはその名の通りマウスを追いかけてくる物体のことです。今回デモではみんな大好きなお金がついてくるようにしました。
あらかじめエディタに書くコード
<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¥
期待する画面
解答ソースコード
$(function () {
$(document).on("mousemove", function (e) {
var x = e.clientX;
var y = e.clientY;
$(".cursor").css({
"top": y + "px",
"left": x + "px"
});
});
});
¥JavaScript¥
解説
今回cssの方は問題にしませんでしたが、勉強になると思うのでちゃんと確認しておいてくださいね。では本題ですが、mousemoveをトリガーにしてfunctionの引数をeとし、e.clientX、e.clientYでそれぞれX軸方向、Y軸方向の距離を得られます。それをcursorのtop、leftにそれぞれpxをつけてcssを与えてあげれば完成です。
ログインして解答を見る
#忍者CODE無料問題集で活動を記録しよう
完了にする！
