kurt.grigg６■画像■　複数のキラキラ踊る（範囲指定）

■2015/12/16：CSS の枠線指定で「border」指定にしても、範囲指定が簡単になりました。
<!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:#ade;}/*★背景色指定　水色*/

/*★#Sa必須。キラキラが踊る領域。サイズはお好みで。背景にキャナルシティの画像指定。#Sa必須*/
#Sa{
position:relative;/*★必須。基準位置の指定*/
margin:50px auto;/*★上下、左右の位置指定*/
width:800px;/*★横幅指定*/
height:265px;/*★縦幅指定*/
background:url(muka21.jpg);/*★キャナルシティの背景画像指定。画像は指定せず背景色だけでも可*/
border:solid 10px #a82;/*★茶色の枠指定*/
border-radius:30px;/*★角丸指定*/
box-shadow:inset 0 -20px 20px #fff;/*★領域の内側に白色の影指定。削除しても可*/
}

/*★ここから以降のリボンの画像指定は不要なら削除*/
/*★リボン画像指定。キラキラより上に表示する見本*/
.ue{
position:absolute;/*★必須。#Saを基準位置にするため*/
top:-30px;/*★マイナス指定で#Sa領域より上にはみ出す*/
left:-60px;/*★マイナス指定で#Sa領域より左にはみ出す*/
z-index:2;/*★キラキラよりもリボン画像を上に表示する。この行を削除すると、キラキラよりも下の表示になる*/
}
/*★リボン画像指定ここまで。不要なら削除*/

--></style>
<!--★ここまでコピー。bodyの中にもコピーがあります-->

</head>
<body>

<!--★ここからコピー。ここから範囲指定の位置。id="Sa"は必須。-->
<div id="Sa">
<p style="padding-top:200px;padding-left:20px;color:#fff;">―動くJavaScript―</p><!--★←文字見本なのでこの１行は削除-->
<div class="ue"><img src="msk6.png"></div><!--★←リボン画像は見本なのでこの１行は削除。画像指定の参考用。キラキラより上(手前)-->
</div>
<!--★ここまで範囲指定の位置-->

<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=["pe9.gif","pe10.gif","soko16.gif","msk3.png"];
var myurl=""; //★画像パス。文書とは別のフォルダーなどに入っている時は指定。全画像共通部分
var nm=20;    //★画像表示数
var inZ=1;    //★キラキラと他の画像(文章)同士の重なり具合。1 以上を指定。他の画像(文章)との重なり具合で変更する
var spd=50;   //★速度。原本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='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=Sa.clientHeight;
var W=Sa.clientWidth;
var YS=Sa.clientTop+Sa.offsetTop;
var XS=Sa.clientLeft+Sa.offsetLeft;
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]+YS+"px";
document.getElementById("pics"+i).style.left=X[i]+XS+"px";
document.getElementById("pics"+i).style.position="absolute";
}
setTimeout(MoveRandom,spd);
}
Curve(); MoveRandom();
}());//即時関数終了
//--></script>
<!--★コピーここまで-->

</body>
</html>
kurt.grigg６■画像■ 複数のキラキラ踊る（範囲指定） 最終修正日 : 2016/01/26

　kurt.grigg６■画像■　複数のキラキラ踊る（範囲指定）　　　　最終修正日 : 2016/01/26
