kurt.grigg１０■画像■　複数種類の雪マウス上下選択均等変化（小→大）

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

■小から大の均等変化の画が上る専用JavaScriptはこちら→　kurt.grigg５■画像■複数種類の画が上るマウス均等変化（小→大）

上記のJavaScriptを改造したマウスストーカーです。
JavaScriptのソースの中で、「上る」か「降る」かを選択できます。見本は「降る」を選択しました。
さらに画像に傾き指定ができます。同じ向きの画像しかない時に変化が付けられます。

それなら、改造元の「上る専用」のJavaScriptは不要に思えますが、実は、この改造したJavaScriptは少し速度が遅くなります。
特にブラウザIE（今回はFirefoxでは落差無し）で、速度の落差が大きいです。
スピードが重要でないなら、「上る」か「降る」かを選択できる、こちらのJavaScriptの方が便利です。

<!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:#000;}/*★背景色指定。黒色。不要なら削除*/
--></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/30
===================================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

var mode=1;       //★方向指定。上るなら 0　降るなら 1

//★画像指定。画像を順番に"●",と区切って、いくつでも並べる。最後の]の前には,(カンマ)無し
var ga=["wan30.gif","wan31.gif","vg1.gif","gh6.png"];
var myurl="";     //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分

var maxImg=60;    //★画像の最大縦幅表示指定。画像の実寸とは無関係です
var minImg=10;     //★原本8。画像の最小縦幅表示指定。画像の実寸とは無関係です
var Amount=30;　　//★画像の表示数。速度が速いと残像が発生するので見た目は多い
var spd=80;       //★原本10。小さいほど速い。速度が違うと残像数が変わり、見え方が違う
var hx=10;        //★表示位置 x座標。マウスと画像の横位置。マイナスで左
var hy=20;        //★表示位置 y座標。マウスと画像の縦位置。マイナスで上。「降る」時はマイナスを付けるとリンクが押せない
var rate=1.5;       //★原本0.5。画像サイズ変化px。数値が大きいほど変化が速い。0でサイズ変化が無くなり、minImg指定のサイズになる
var opp=2;        //★透過速度。数値が大きいと、すぐ透明になる。0を指定すると透過は無し。通常1か2で
var rota=[-30,0,45]; //★画像の傾き角度  90で右回りの90度。マイナス指定で左回り。増減可能。不要ならvar rota=[0];で

//指定ここまで-------------------------------------------------------------------------------------------
var Ymouse=(mode!=0)? 2000:-200;//■修正
var Xmouse=-200;
var Ypos=[], Xpos=[], Speed=[], 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)];//追加
var rrd=rota[Math.floor(Math.random()*rota.length)];//■傾き追加
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;
document.write('<img src="'+randomGa+'" id="si'+i+'" style="position:absolute;top:0;left:0; transform:rotate('+rrd+'deg);">');//追加
}
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);
(mode!=0)? Ypos[i] -=sy: Ypos[i] +=sy;//■修正
(mode!=0)? Xpos[i] -=sx: Xpos[i] +=sx;//■修正
var h=window.innerHeight-18+window.pageYOffset-maxImg;//■追加
var w=window.innerWidth-18+window.pageXOffset-maxImg;//■追加
if ((mode!=0)? Ypos[i]>h:Ypos[i]<-maxImg){ Ypos[i]=Ymouse; Xpos[i]=Xmouse; Speed[i]=Math.random()*6+4; grow[i]=minImg; opa[i]=1;}//■修正
var layer=document.getElementById("si"+i).style;
layer.left=Math.min(w, Xpos[i])+"px"; layer.top=Math.min(h, Ypos[i])+"px";//■修正。右端と下端指定
layer.height=grow[i]+"px";layer.opacity=opa[i];//追加
grow[i] +=rate; Cstep[i] +=Step[i]; opa[i] -=(opp/100);//■修正と追加
if (grow[i]>maxImg-1) grow[i]=maxImg; if(opa[i]<0) opa[i]=0;//■追加
}
setTimeout(MouseBubbles,spd);
}
MouseBubbles();
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>

kurt.grigg１０■画像■ 複数種類の雪マウス上下選択均等変化（小→大） UP日時 : 2016/07/30

　kurt.grigg１０■画像■　複数種類の雪マウス上下選択均等変化（小→大）　　　　UP日時 : 2016/07/30