kurt.grigg１５■画像■　目玉ストーカー

●2016/02/03：即時関数で囲んで、グローバル変数を消しました。
目玉がマウスに付いてくる、kurt.grigg の有名な「目玉のマウスストーカー」です。
原本を改造して、HTML5対応にして、古いブラウザ用の記述を削除しています。原本はこちらから。
前々回より修正して、HTML5でも空間指定しなくても動作するようにしました。

それから理由は不明ですが、HTML5でフォント指定がメイリオ(Meiryo)だと、黒目の位置が白目より少し下側にズレるようです。
修正するためにCSSで別のフォントを指定しています。位置のズレる方はコピーして下さい。
↑上記の説明は、完全な私の勘違いでした。原因はフォント指定ではありません。2015/12/26 に修正しました。
ご指摘下さった、秀天様、ありがとうございます。ご迷惑をおかけしてすみませんでした。

<!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>kurt.grigg１５■画像■　目玉ストーカー</title>

<style type="text/css"><!--
body{background:#ace;}/*★背景色指定。水色。不要なら削除*/
--></style>

</head>
<body>

<!--★コピーここから　位置はbodyの中です-->
<script type="text/javascript"><!--
/*==================================================================================
目玉ストーカー　Watching Eyes script- By Kurt (kurt.grigg@virgin.net)
Script featured on Dynamic Drive
Visit http://www.dynamicdrive.com for this script and more
★HTML5対応にして旧ブラウザ対応分削除。黒目の位置を修正　2015/12/26。グローバル変数削除　2016/02/03
===================================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

var pps=15;//★白目の中の黒目の位置。原本17。数値が小さいほど上の位置になります

var mmm='<div style="position:absolute;top:0;left:0;">';
mmm+='<img src="eye.gif" id="eyeball" style="position:absolute;top:0;left:0;width:69px;height:34px;">';
mmm+='<img src="pupils.gif" id="pupil1" style="position:absolute;top:0;left:0;width:13px;height:13px;">';
mmm+='<img src="pupils.gif" id="pupil2" style="position:absolute;top:0;left:0;width:13px;height:13px;"></div>';
document.write(mmm);
var ym=0,xm=0;
document.onmousemove=function mouse(e){ ym=e.pageY-window.pageYOffset; xm=e.pageX;}
var etemp=eyeball.style, p1temp=pupil1.style, p2temp=pupil2.style;
var dy=0,dx=0,fy=0,fx=0,angle1=0,angle2=0,d1=0,d2=0;
function makefollow(){
var sy=window.pageYOffset, wy=window.innerHeight, wx=window.innerWidth;
var chy=Math.floor(fy-34);
if (chy <= 0) chy = 0;
if (chy >= wy-34) chy = wy-34;
var chx=Math.floor(fx-34);
if (chx <= 0) chx = 0;
if (chx >= wx-69) chx = wx-69;
etemp.top=chy+sy+"px";
etemp.left=chx+"px";
//eyeball1 centre.
c1y=parseInt(chy+sy)+pps;//■原本17
c1x=parseInt(chx)+17;
//eyeball2 centre.
c2y=parseInt(chy+sy)+pps;//■原本17
c2x=parseInt(chx)+(69-17);//■原本52。69-17=52
dy1 = ym+sy - c1y;
dx1 = xm - c1x;
d1 = Math.sqrt(dy1*dy1 + dx1*dx1);
dy2 = ym+sy - c2y;
dx2 = xm - c2x;
d2 = Math.sqrt(dy2*dy2 + dx2*dx2);
ay1 = ym+sy - c1y;
ax1 = xm - c1x;
angle1 = Math.atan2(ay1,ax1)*180/Math.PI;
ay2 = ym+sy - c2y;
ax2 = xm - c2x;
angle2 = Math.atan2(ay2,ax2)*180/Math.PI;
dv=1.7; 
p1temp.top=(d1 < pps)?(c1y-6+d1/dv*Math.sin(angle1*Math.PI/180))+"px":(c1y-6+10*Math.sin(angle1*Math.PI/180))+"px";//■原本17
p1temp.left=(d1 < 17)?(c1x-6+d1/dv*Math.cos(angle1*Math.PI/180))+"px":(c1x-6+10*Math.cos(angle1*Math.PI/180))+"px";
p2temp.top=(d2 < pps)?(c2y-6+d2/dv*Math.sin(angle2*Math.PI/180))+"px":(c2y-6+10*Math.sin(angle2*Math.PI/180))+"px";//■原本17
p2temp.left=(d2 < 17)?(c2x-6+d2/dv*Math.cos(angle2*Math.PI/180))+"px":(c2x-6+10*Math.cos(angle2*Math.PI/180))+"px";
}

function move(){
dy=fy+=(ym-fy)*0.12-2;
dx=fx+=(xm-fx)*0.12;
makefollow();
setTimeout(move,10);
}
move();
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>

kurt.grigg１５■画像■ 目玉ストーカー 最終修正日 : 2016/02/03

　kurt.grigg１５■画像■　目玉ストーカー　　最終修正日 : 2016/02/03