ログイン

問題9 マウスストーカーを作ろう!

jQueryAnimationの問題

jQueryAnimation

マウスストーカーを作ろう!

問題

今回はマウスストーカーを作ってみましょう!マウスストーカーとはその名の通りマウスを追いかけてくる物体のことです。今回デモではみんな大好きなお金がついてくるようにしました。

自分の環境に書くコード

              <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を与えてあげれば完成です。
ログインして解答を見る
完了にする!
LINEの友達追加でお役立ち動画をGET!!