マウスストーカー１-１■画像■　画像１個で後追いマウス

●2016/01/24：即時関数で囲んで、グローバル変数を消しました。
ゆっくりと画像がマウスに追随する、マウスストーカーのJavaScriptです。
同じような速度変化付きの動作をするJavaScriptを何回か掲載しましたが、とても詳細な説明があったのでこちらに変更しました。
原本はインフォシーク　ホームページ作成から。
原本はブラウザFirefoxでは動作不可だったのを、動作可能にしてあります。
■2016/09/22：無限落下防止

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>マウスストーカー１-１■画像■　画像１個で後追いマウス</title>

<style type="text/css"><!--
body{ background:#edc;}<!--★背景色薄茶色。不要なら削除-->
--></style>

</head>
<body>

<!--★コピーここから。位置はbodyの中です-->
<script type="text/javascript"><!--
/*=============================================================================
画像１個で後追いマウスストーカー　　★2016/09/22 ブラウザFirefoxでも動作可能へ変更
http://infoseek_rip.g.ribbon.to/iswebmag.hp.infoseek.co.jp/sample199.html
=============================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

var mga="hai2.gif";  //★画像指定
var hx=10;           //★表示位置 x座標。マウスと画像の横位置。マイナス値で左側
var hy=20;           //★表示位置 y座標。マウスと画像の縦位置。マイナス値で上側
var spd=10;          //★原本10。マウスと画像の速度。小さいほど速い
var st=50;     　　　//★原本20。マウスと画像の追いつき変化速度。小さいほど変化が小さい(離れにくい)

//指定ここまで----------------------------------------------------------------------------------------------
var ix=0,iy=0,mx=-200, my=-200;
document.write("<img src="+mga+" id='Mo' style='position:absolute;'>");
document.onmousemove=function (e){ mx=e.pageX+hx; my=e.pageY+hy;}
function Run() {
var w=window.innerWidth-Mo.offsetWidth-18;//無限落下防止
var h=window.pageYOffset+window.innerHeight-Mo.offsetHeight-18;//無限落下防止
var ob=document.getElementById("Mo").style;
ix+=(mx-ix)/st; iy+=(my-iy)/st;
ob.left=Math.min(w,ix)+"px"; ob.top=Math.min(h,iy)+"px";
setTimeout(Run,spd);
}
Run();
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>

マウスストーカー１-１■画像■ 画像１個で後追いマウス 最終修正日 : 2016/09/22

　マウスストーカー１-１■画像■　画像１個で後追いマウス　　　　最終修正日 : 2016/09/22