kurt.grigg５■画像■　複数の蝶が舞う

<!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:#adf;/*★背景色水色指定。グラデーションが見えないブラウザ用*/
background:url(frc6.png) repeat-x,linear-gradient(#adf,#adf 250px,#3b7 450px,#f8f 490px,#dcb 500px);/*★影絵の背景画像とグラデ指定*/
background-attachment:fixed;/*★背景位置固定指定。要素が画面一杯無い時もグラデが下まで描画するように指定*/
}
--></style>

</head>
<body>

<!--★コピーここから。位置はbodyの中です-->
<script type="text/javascript"> <!--
/*=====================================================================
複数画像のランダム移動　★古いブラウザ対応分削除。HTML5対応、画像表示数と文章との重ね方追加　2016/01/26
Multi Random Movement 2 Script by kurt.grigg@virgin.net
JS保管サイト：http://www2.tky.3web.ne.jp/~ogura1/
========================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★蝶の画像指定。画像を順番に"●",と区切って、いくつでも並べる。最後の]の前には,(カンマ)無し
var Pic=["drg2.gif","drg3.gif","ok8c.gif"];
var myurl=""; //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分
var nm=10;    //★画像表示数
var inZ=-1;   //★画像や文章の上に浮くなら 1 。下に隠れるなら -1
var spd=20;   //★速度。原本10。数値が大きいほど遅い

var n=Pic.length;
var load=new Array(); for(var p=0; p<n; p++){load[p]=new Image(); load[p].src=myurl+Pic[p];}//画像先読み
var VB=0,HB=0,R=[],PB=[],RD=[],Y=[],X=[];
var D=[],SP=[],BY=[],BX=[];
for (var i=0; i<nm; i++){
document.write("<img src="+myurl+Pic[i%n]+" id='pics"+i+"' style='position:fixed; z-index:"+inZ+";'>");//固定指定へ
Y[i]=10;
X[i]=10;
D[i]=Math.floor(Math.random()*70+10);
SP[i]=Math.floor(Math.random()*4+2);/*MaxSpeed=4  MinSpeed=2の数値。大きいほど速い*/
}
function Curve(){
var plusMinus=[1,-1,2,-2,3,-3,0,1,-1,0,5,-5];
for (i=0; i<nm; i++){
R[i]=Math.floor(Math.random()*plusMinus.length);
RD[i]=plusMinus[R[i]];
}
setTimeout(Curve,1500);
}
function MoveRandom(){
var H=window.innerHeight, W=window.innerWidth;
for (i=0; i<nm; i++){
BY[i]=-(document.getElementById("pics"+i).offsetHeight);//修正
BX[i]=-(document.getElementById("pics"+i).offsetWidth);//修正
PB[i]=D[i]+=RD[i];
var y=SP[i]*Math.sin(PB[i]*Math.PI/180);
var x=SP[i]*Math.cos(PB[i]*Math.PI/180);
if (D[i] < 0){ D[i]+=360;}
Y[i]+=y; X[i]+=x; VB=180-D[i]; HB=0-D[i];
//Corner rebounds! not necessary but looks nice.
if ((Y[i] < 1) && (X[i] < 1)) {Y[i]=1;X[i]=1;D[i]=45;}
if ((Y[i] < 1) && (X[i] > W+BX[i])) {Y[i]=1;X[i]=W+BX[i];D[i]=135;}
if ((Y[i] > H+BY[i]) && (X[i] < 1)) {Y[i]=H+BY[i];X[i]=1;D[i]=315;}
if ((Y[i] > H+BY[i]) && (X[i] > W+BX[i])) {Y[i]=H+BY[i];X[i]=W+BX[i];D[i]=225;}
//Edge rebounds!
if (Y[i] < 1) {Y[i]=1;D[i]=HB;}  
if (Y[i] > H+BY[i]) {Y[i]=H+BY[i];D[i]=HB;}  
if (X[i] < 1) {X[i]=1;D[i]=VB;} 
if (X[i] > W+BX[i]) {X[i]=W+BX[i];D[i]=VB;} 
document.getElementById("pics"+i).style.top=Y[i]+"px";
document.getElementById("pics"+i).style.left=X[i]+"px";
}
setTimeout(MoveRandom,spd);
}
Curve(); MoveRandom();
}());//即時関数終了
//--></script>
<!--★コピーここまで-->

</body>
</html>
kurt.grigg５■画像■ 複数の蝶が舞う 最終修正日 : 2016/01/26

　kurt.grigg５■画像■　複数の蝶が舞う　　　　最終修正日 : 2016/01/26
