kurt.grigg４■画像■　サンタが飛ぶ（範囲指定）

■2015/12/16：CSS の枠線指定で「border」指定にしても、範囲指定が簡単になりました。

●2016/01/26：即時関数で囲んで、グローバル変数を消しました。
全画面を飛ぶ■kurt.grigg３■画像■　蝶が舞うを改造し、範囲指定ができるようにしました。
サンタが枠線で囲まれた領域の中を飛ぶ、範囲指定の JavaScript です。
蝶ではなく、サンタが飛ぶので速度を少し遅くしてあります。
今回は id="Sa"を指定したdivの領域に、サンタが飛びます。

１．まず前回掲載分との大きな違いは、枠線に「border」使用でも範囲指定が簡単になりました。
そのため「outline」使用分は削除しました。
２．「サンタが飛ぶ領域の中に画像を入れる方法」を説明します。
「id="Sa"を指定した領域」に複数の画像を指定し、サンタがその指定した画像の上を飛んだり、下を飛んだりできます。
CSSで「大きな１本の緑のツリー」には「z-index:2;」の指定をしているので、サンタよりもツリーが上（手前）にきます。
「小さな２本の白いツリー」は指定が入れてない（指定を入れないとz-index:0;）ので、サンタよりも下（奥）になります。
この見本では、サンタは JavaScript のソースの中で「z-index:1;」を入れていますが、この数値は変更可能です。
ただし絶対にマイナス指定はしないで下さい。
範囲指定の場合、「z-index」にマイナス指定をするとサンタもツリーも表示されません。
画像や文章の重ね方の方法の参考は、AllAbout から。

<!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;}/*★背景色指定　黒色*/

/*★#Sa必須。サンタが飛ぶ領域。サイズはお好みで*/
#Sa{
position:relative;/*★必須。基準位置の指定*/
margin:30px auto;/*★上下、左右の位置指定*/
width:700px;/*★横幅指定*/
height:350px;/*★縦幅指定*/
background:linear-gradient(#00a,#000); /*★背景色のグラデーション。青→黒。グラデは使用せず、背景色や背景画像を指定しても可*/
border:solid 10px #a82;/*★茶色の枠指定*/
border-radius:30px;/*★角丸指定*/
box-shadow:inset -3px -20px 20px #fff;/*★領域の内側に白色の影指定。削除しても可*/
}

/*★ここから以降のツリーの画像指定は不要なら削除*/
/*★緑のツリー画像指定。サンタより上に表示する見本*/
.ue{
position:absolute;/*★必須。#Saを基準位置にするため*/
bottom:0px;
right:20px;
z-index:2;/*★サンタよりもツリー画像を上に表示する。この行を削除すると、サンタよりも下の表示になる*/
}

/*★白い２本のツリー画像指定。サンタより下になる分はz-index指定は不要*/
.sita{
position:absolute;/*★必須。#Saを基準位置にするため*/
bottom:20px;
left:50px;
}
/*★ツリー画像指定ここまで。不要なら削除*/
--></style>
<!--★ここまでコピー。bodyの中にもコピーがあります-->

</head>
<body>

<!--★ここからコピー。ここから範囲指定の位置。id="Sa"は必須。-->
<div id="Sa">
<img src="mh11.gif" class="ue"><!--★←ツリー画像は見本なのでこの１行は削除。画像指定の参考用。サンタより上-->
<img src="pk2.png" class="sita"><!--★←ツリー画像は見本なのでこの１行は削除。画像指定の参考用。サンタより下-->
</div>
<!--★ここまで範囲指定の位置-->

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

var Pic="katu4.gif";  //★サンタの画像指定
var inZ=1;            //★サンタと他の画像(文章)同士の重なり具合。1 以上を指定。他の画像(文章)との重なり具合で変更する
var spd=30;           //★速度。原本10。数値が大きいほど遅い

document.write("<img src="+Pic+" id='pics' style='z-index:"+inZ+";'>");
var R=0,PB=0,RD=0,VB=0,HB=0;
var Y=10,X=10,D=Math.floor(Math.random()*60+10);
function Curve(){
var plusMinus=[1,-1,2,-2,3,-3,0,1,-1,4,-4];
R=Math.floor(Math.random()*plusMinus.length);
RD=plusMinus[R];
setTimeout(Curve,1800);
}
function MoveRandom(){
var H=Sa.clientHeight;
var W=Sa.clientWidth;
var YS=Sa.clientTop+Sa.offsetTop;
var XS=Sa.clientLeft+Sa.offsetLeft;
var BY=-(pics.offsetHeight);
var BX=-(pics.offsetWidth);
PB=D+=RD;
var y=3*Math.sin(PB*Math.PI/180);/*SY=3を数値で*/
var x=5*Math.cos(PB*Math.PI/180);/*SX=5を数値で*/
if (D<0){ D+=360;}
Y+=y; X+=x; VB=180-D; HB=0-D;
//Corner rebounds! not necessary but looks nice.
if ((Y < 1) && (X < 1)) {Y=1;X=1;D=45;}
if ((Y < 1) && (X > W+BX)) {Y=1;X=W+BX;D=135;}
if ((Y > H+BY) && (X < 1)) {Y=H+BY;X=1;D=315;}
if ((Y > H+BY) && (X > W+BX)) {Y=H+BY;X=W+BX;D=225;}
//Edge rebounds!
if (Y < 1) {Y=1;D=HB;}  
if (Y > H+BY) {Y=H+BY;D=HB;}  
if (X < 1) {X=1;D=VB;} 
if (X > W+BX) {X=W+BX;D=VB;} 
pics.style.top=(Y+YS)+"px";
pics.style.left=(X+XS)+"px";
pics.style.position="absolute";
setTimeout(MoveRandom,spd);
}
Curve(); MoveRandom();
}());//即時関数終了
//--></script>
<!--★ここまでコピー-->

</body>
</html>

kurt.grigg４■画像■ サンタが飛ぶ（範囲指定） 最終修正日 : 2016/01/26

　kurt.grigg４■画像■　サンタが飛ぶ（範囲指定）　　　　最終修正日 : 2016/01/26