kurt.grigg２■画像■　複数種類の泡の上るマウス（小→大）

●2016/07/28：即時関数で囲んで、グローバル変数を消しました。

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

上記のJavaScriptを改造しました。
マウスから複数種類の画像の泡が噴き出す、マウスストーカーです。
改造元と同じように、泡のサイズはマウス部分が小さく、泡が上るにつれランダムに大きくなっていきます。
速度指定が可能なので、複数画像使用の時は遅めにした方がよく見えると思いますが、お好みで指定して下さい。
複数種類の画像指定、速度指定以外に、大小に変化する泡のサイズの指定、透過指定が可能です。
なお、ブラウザFirefoxでは少し速度が遅くなります。

ab1.png

ab2.png

ab3.png

ab4.png

ab5.png

私の作成した
背景透過png。
右クリックで
どうぞ。

■小から大の画像で上るか降るかの選択可能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:#125;}/*★背景色指定。紺色。不要なら削除*/
--></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=["ab1.png","ab2.png","ab3.png","ab4.png","ab5.png"];
var myurl="";     //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分

var maxImg=25;    //★画像の最大縦幅表示指定。画像の実寸とは無関係です
var minImg=8;     //★原本8。画像の最小縦幅表示指定。画像の実寸とは無関係です
var maxOp=0.9;    //★透過の最大値。ランダム変化です。0.1から1の間で指定。miniOpより同じか大きくする
var miniOp=0.5;   //★透過の最小値。ランダム変化です。0.1から1の間で指定 。maxOpより同じか小さくする。
var Amount=20;　　//★画像の表示数。速度が速いと残像が発生するので見た目は多い
var spd=10;       //★原本10。小さいほど速い。速度が違うと残像数が変わり、見え方が違う
var hx=0;         //★表示位置 x座標。マウスと画像の横位置。マイナスで左
var hy=-30;       //★表示位置 y座標。マウスと画像の縦位置。マイナスで上
var rt=0.5;       //★原本0.5。画像サイズ変化のランダムなpx。数値が大きいほどサイズ変化が速い

//指定ここまで-------------------------------------------------------------------------------------------
var Ymouse=-200,Xmouse=-200;
var Ypos=[], Xpos=[], Speed=[], rate=[], grow=[], Step=[], Cstep=[], opa=[];//追加有り
var len=ga.length;//追加
document.onmousemove=function (e){Ymouse=e.pageY+hy; Xmouse=e.pageX+hx;}
for (var i=0; i<Amount; i++){
var randomGa=myurl+ga[Math.floor(Math.random()*len)];//追加
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]=minImg; rate[i]=Math.random()*rt+0.1;//原本0.5をrtへ変更。
opa[i]=Math.random()*(maxOp-miniOp)+miniOp;//追加
document.write('<img src="'+randomGa+'" id="si'+i+'" style="position:absolute;top:0;left:0;">');
}
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]<-maxImg){ Ypos[i]=Ymouse; Xpos[i]=Xmouse; Speed[i]=Math.random()*6+4; grow[i]=minImg;}
var layer=document.getElementById("si"+i).style;
layer.left=Xpos[i]+"px"; layer.top=Ypos[i]+"px"; layer.height=grow[i]+"px";layer.opacity=opa[i];//追加
grow[i] +=rate[i]; Cstep[i] +=Step[i];
if (grow[i]>maxImg-1) grow[i]=maxImg;
}
setTimeout(MouseBubbles,spd);
}
MouseBubbles();
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>

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

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