マウスストーカー１２文字

<!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:#9cd;}/*★背景色指定。水色。不要なら削除*/
#Mo{width:80px;}/*★魚のマウス画像の実寸の調整。見本では大きかったので小さくしました。実寸通りで良いなら、この行は削除*/
--></style>

</head>
<body> 

<!--★コピーここから-->
<script type="text/javascript"><!--
/*===================================================================
魚と文字泡のマウスストーカー　By(オリジナルJavaScript) : http://ijichi.easter.ne.jp/java8/osakana3.html
★ブラウザIE専用を他ブラウザ対応へ改造。画像の泡を文字の泡へ変更　 2017/06/09
====================================================================*/
(function (){   //即時関数で囲んでグローバル変数を消すため、この行はこのままで

var mga="aq1.gif";  //★マウス画像指定。ここでは魚
var hx=30;          //★マウスと魚の横位置。マイナス指定で左側
var hy=30;          //★マウスと魚画像の縦位置。マイナス指定で上側

var moj=["●"];                         //★泡文字指定。増減可能。複数指定の時は("文字","文字","文字")で
var fsz=["8px","10px","14px"];          //★泡文字のサイズ。増減可能。px指定でも%指定でも可能
var Clrs=["#fff","#ccf","#fff","#9ff"]; //★泡文字の色。増減可能
var no=10;          //★画面に出る泡の表示数
var spd=20;　　     //★速度指定。原本20。小さいほど速い
var opa=0.7;        //★泡文字の透明度(0～1)　0で透明。 1で完全不透明。0は指定しない
var bhx=25;         //★マウスと泡文字の横位置。マイナス指定で左側
var bhy=25;         //★マウスと泡文字の縦位置。マイナス指定で上側

/*★↓泡文字の影指定をCSS形式で記述。輪郭線やボカシ用。好みで変更可。指定不要ならvar snowcss="";で。見本は黒の輪郭線。*/
var snowcss="text-shadow: 0px 0px 2px #000;";

//指定項目ここまで--------------------------------------------------
function $(id){return document.getElementById(id);}/*document.getElementByIdを簡略化*/
var dx=[], xp=[], yp=[];      // coordinate and position variables
var am=[], stx=[], sty=[];    // amplitude and step variables
var i, w, h;
var n=9;
var myx=[],myy=[];
for(i=1; i<( no+1); i++){
document.write("<div id='dot"+i+"' style='position:absolute; display:none; top:0; left:0; opacity:"+opa+"; font-size:"+fsz[(i-1)%fsz.length]+"; color:"+Clrs[(i-1)%Clrs.length]+";"+snowcss+"'>"+moj[(i-1)%moj.length]+"</div>");
}
document.write("<img id='Mo' src='"+mga+"' style='left:-100px; position:absolute; top:-100px;'>");
document.onmousemove=function(e){xp[0]=e.pageX;yp[0]=e.pageY;myx[0]=e.pageX;myy[0]=e.pageY;}
w=window.innerWidth;
h=window.innerHeight;
for (i=1; i<(no+1); i++) {
dx[i] = 0;                                // set coordinate variables
xp[i] = 60+Math.random()*(w-50);  　　　　// set position variables
yp[i] = 30+Math.random()*(h-10);
am[i] = Math.random()*20;                 // set amplitude variables
stx[i] = 0.2 + Math.random()/10;          // set step variables
sty[i] = 4 + Math.random();               // set step variables
}
function star() {
for (i=1; i<(no+1); i++) {  // iterate for every dot
var lay=$("dot"+i).style;//■簡略のため追加
yp[i] -= sty[i];
if (yp[i] <30) {
xp[i] = xp[0]; yp[i] = yp[0];
stx[i] = 0.2 + Math.random()/10; sty[i] = 4 + Math.random();
if(yp[i]<30){ lay.display="none";}
else if(yp[i]>=30){ lay.display="block";}
}
dx[i] += stx[i];
lay.top=yp[i]+bhy+"px";
lay.left=xp[i]+am[i]*Math.sin(dx[i])+bhx+"px";
}
for (i=n;i>0;i--){ myx[i]=myx[i-1]; myy[i]=myy[i-1];}
$("Mo").style.left=myx[n]+hx+"px";
$("Mo").style.top=myy[n]+hy+"px";
setTimeout(star, spd);
}
star();
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>
マウスストーカー１２■文字■ マウスから文字泡と画像魚 最終修正日 : 2017/06/09

　マウスストーカー１２■文字■　マウスから文字泡と画像魚　　　　最終修正日 : 2017/06/09
