タイトルの通り画像がマウスカーソルを追いかけるものを作りたいと思います。
まずは変数などの設定をします
var mga = "download.png";//mgaは画像でダウンロードしたもの
var ix=0, iy=0, mx=0, my=0;//ix,iyは画像の位置 mx,myはマウスカーソルの位置 最初は0に設定しておく
document.write("<img src="+mga+" id='img' style='position:absolute;'>");
ixとiyは画像が追いかけ始める最初の位置 この場合は左上端からになる
次にマウスカーソルの座標を取得します
function getMouseXY(e) {//getMouseXYはマウスカーソルの座標を取得する
mx = e.pageX;//mxはマウスカーソルx軸を取得する
my = e.pageY;//myはマウスカーソルのy軸を取得する
}
document.onmousemove = getMouseXY;
//onmousemoveはマウスカーソルの位置を取得する マウスカーソル＋が動くとイベントが発生する
function Run() {
if (mx > ix) {//mx(マウスカーソル)がix(画像)より大きい時ixを+3
ix += 3; //3ずつ追いかける
} else if (mx < ix){//mx(マウスカーソル)がix(画像)より小さい時ixを-3
ix -= 3; //3ずつ追いかける
}
if (my > iy) {//my(マウスカーソル)がiy(画像)より大きい時myを+3
iy += 3;
} else if (my < iy) {//my(マウスカーソル)がiy(画像)より小さい時myを-3
iy -= 3;
}
var ob = document.getElementById("img").style;
ob.left = ix+"px";
ob.top = iy+"px";
//obは上にあるimgのスタイルを動かす変数
//ob.leftというのは左からiy(数値)px
//ob.topは上からix(数値)px
setTimeout(Run,200);//0.2秒に一回動く 数を大きくするほど動く頻度が長くなる
}
Run();
これで完成です
スタイルを合わせたすべて
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サイト</title>
<style>
# img {
width: 16px;
height: 16px;
border-radius: 50%;
}
</style>
</head>
<body>
<script>
var mga = "download.png";//mgaは画像でダウンロードしたもの
var ix=0, iy=0, mx=0, my=0;//ix,iyは画像の位置 mx,myはカーソルの位置
document.write("<img src="+mga+" id='img' style='position:absolute;'>");
function getMouseXY(e) {//getMouseXYはカーソルの座標を取得する
mx = e.pageX;//mxはカーソルx軸を取得する
my = e.pageY;//myはカーソルのy軸を取得する
}
document.onmousemove = getMouseXY;
//onmousemoveはカーソルの位置を取得する
function Run() {
if (mx > ix) {//mxがixより大きい時ixを+3
ix += 3;
} else if (mx < ix){//mxがixより小さい時ixを-3
ix -= 3;
}
if (my > iy) {//myがiyより大きい時myを+3
iy += 3;
} else if (my < iy) {//myがiyより小さい時myを-3
iy -= 3;
}
var ob = document.getElementById("img").style;
ob.left = ix+"px"; ob.top = iy+"px";
//obは上にあるimgのスタイルを動かす変数
//ob.leftというのは左からiy(数値)px
//ob.topは上からix(数値)px
setTimeout(Run,200);//0.2秒に一回動く
}
Run();
//setInterval(Run,200);
</script>
</body>
</html>
styleの#imgで画像の大きさを変更できます