kurt.grigg１■画像■　泡の上るマウス（小→大）

●2016/02/15：即時関数で囲んで、グローバル変数を消しました。
マウスから泡が激しく噴き出すマウスストーカーです。

泡のサイズは最初は小さく、上るにつれてランダムに大きくなっていきます。
以前掲載分には「Kurt Grigg」の名が無かったのですが、原本のJavaScript作成は「kurt.grigg」です。
原本の古いブラウザ対応分を削除し、全ブラウザ対応に改造しました。
ただしブラウザFirefoxでは、少し速度が遅くなります。
このJavaScriptは、使用画像のサイズに関係無く、最大表示サイズは25px、最小表示サイズは8pxで、透過度は0.9です。
この指定は原本通りで作成しました。

原本サイトはすでに閉鎖済みで、保管サイトからの原本はこちらから。
この原本はブラウザIE(とネットスケープ)専用で、最新ブラウザIEの11では動作しますが、HTML5では泡の大小の指定が無効になります。
他のブラウザでは全く動作しません。→ ではなぜ原本を掲載するのか？→ 改造にあまり自信が無いからです（笑）

■画像種類が複数のJavaScriptはこちら→　kurt.grigg２■画像■複数種類の泡の上るマウス（小→大）

■2016/07/28：微修正。

<!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:#09b;}/*★背景色指定。青色。不要なら削除*/
--></style>

</head>
<body>

<!--★コピーここから　位置はbodyの中です-->
<script type="text/javascript"><!--
/*=============================================================================
泡の上るマウス（小→大）　 Original:Kurt Grigg (kurt.grigg@virgin.net)  Web Site: http://website.lineone.net/~kurt.grigg/javascript(閉鎖)
JS保管サイト(The JavaScript Source!!)：http://www.javascriptsource.com
★古いブラウザ対応分を削除。全ブラウザ対応へ　 2016/07/28
===============================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

var ga="ab5.png";     //★泡の画像指定
var Amount=20;　　　　//★泡の表示数。残像が発生するので見た目は多い
var spd=10;        　 //★原本10。小さいほど速い。速度が違うと残像数が変わり、見え方が違う

//指定ここまで-----------------------------------------------------------------------------
var Ymouse=-100,Xmouse=-100;
var Ypos=[],Xpos=[],Speed=[],rate=[],grow=[],Step=[],Cstep=[];
document.onmousemove=function (e){Ymouse=e.pageY-30; Xmouse=e.pageX;}
for (i=0; i<Amount; i++){
Ypos[i]=Ymouse; Xpos[i]=Xmouse;
Speed[i]=Math.random()*4+1;
Cstep[i]=0; Step[i]=Math.random()*0.1+0.05;
grow[i]=8; rate[i]=Math.random()*0.5+0.1;
document.write('<img src='+ga+' id="si'+i+'" style="position:absolute;top:0;left:0;opacity:0.9;">');
}
function MouseBubbles(){
for (i = 0; i < Amount; i++){
var sy=Speed[i] * Math.sin(270 * Math.PI / 180);
var sx=Speed[i] * Math.cos(Cstep[i] * 4);
Ypos[i] +=sy; Xpos[i] +=sx;
if (Ypos[i]<-40){ Ypos[i]=Ymouse; Xpos[i]=Xmouse; Speed[i]=Math.random()*6+4; grow[i]=8;}
var layer=document.getElementById("si"+i).style;
layer.left=Xpos[i]+"px"; layer.top=Ypos[i]+"px"; layer.width=grow[i]+"px"; layer.height=grow[i]+"px";
grow[i] +=rate[i]; Cstep[i] +=Step[i];
if (grow[i]>24) grow[i]=25;
}
setTimeout(MouseBubbles,spd);
}
MouseBubbles();
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>

kurt.grigg１■画像■ 泡の上るマウス（小→大） 最終修正日 : 2016/07/28

　kurt.grigg１■画像■　泡の上るマウス（小→大）　　　　最終修正日 : 2016/07/28