背景移動２■table背景移動・複数設定

■2019/01/20：ソースを簡略化。
画像の上の「mx=0;　my=2;」等の数値は、■背景移動１■box背景移動■等の移動方向の数値の入れ方の参考にして下さい。

●2019/01/20：即時関数で囲んで、グローバル変数を消しました。
JavaScriptを使用した背景移動です。
背景移動のJavaScriptついては、とらねこ庵（サイト閉鎖済）とオリジナルJavaScriptを参考に、2015/06/16より少しずつリニューアルします。

今回は複数指定の背景移動のJavaScriptです。
番号が同じものが、１個の領域分のセットになります。
たとえば、bodyに指定した「id="aka3"」の領域の背景移動は、JavaScriptのソースでは「mx[3]=▲とmy[3]=▲の番号指定行」が動作に対応しています。
「id="aka3"」の領域が不要なら、赤字部分の番号指定行を削除して下さい。

なお、「mx[番号]=▲とmy[番号]=▲の指定行」の▲の数値で、背景移動の方向と速度を設定しています。
この▲の数値は自由に変更してかまいません。
つまり、「上から下」の領域を、１個ではなく２個や３個にしてもいいのです。
ただし注意してほしいのは、「var mx[番号]=▲; var my[番号]=▲;」の数値を変更するという意味は、▲の数値を変更するという事です。mx[番号]の番号数字ではありません。
mx[番号]の[番号]は領域の場所を指定する番号です。[番号]は「id="aka●"」の領域の番号と対応しています。
そしてCSSでは同じページで、同じidは使用不可能です。

だから「上から下」を３ヶ所指定するために、bodyの「id="aka2"」や「id="aka3"」の指定を「id="aka1"」に変更してはダメです。
CSSでは同じページで、同じidは使用不可能なのです。
その場合は、
var mx[2]=0; var my[2]=-2;
var mx[3]=2; var my[3]=0;
上記の２行を　↓↓　下記に変更します。
var mx[2]=0; var my[2]=2;
var mx[3]=0; var my[3]=2;
これで「id="aka1"」と「id="aka2"」と「id="aka3"」の３ヶ所が「上から下」になります。

<!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>背景移動２■table背景移動・複数設定</title>

<!--★ここからコピー 今回はdivではなくtable指定-->
<style type="text/css"><!--

/*★table本体の指定*/
#test{
margin:20px auto;/*★table本体の中央位置指定(上下、左右)*/
border-spacing:5px 20px;*★tableのセル同士の間隔。左右　上下の間隔指定になる*/
}

/*★tableのセルの共通指定*/
#test td{
width:300px;/*★セルの横幅*/
height:200px;/*★セルの縦幅*/
border:5px solid #000;/*★セルの枠線　黒色*/
vertical-align:top;/*★文字の垂直上位置指定*/
}

/*★tableのセルの個別の背景画像指定。#aka●は必須*/
#aka1 {background: url(sa1.png);}
#aka2 {background: url(fp2.png);}
#aka3 {background: url(sora1.jpg);}
#aka4 {background: url(../slide/a3.jpg);}
#aka5 {background: url(bc2.jpg);}
#aka6 {background: url(ob1.png);}
#aka7 {background: url(ira4.png);}
#aka8 {background: url(mh3.png);}

#test span{
background-color: rgba(255,255,255,0.7);/*★tableの文字部分の背景色。70%透過の白色*/
color:#000;/*★tableの文字色　黒色*/
}
--></style>
<!--★ここまでコピー。bodyの中にもコピーがあります-->

</head>
<body>

<!--★ここからコピー。今回はtableのtdで指定。もちろん複数のdiv指定でも可。 id="aka●"は必須-->
<!--★tableの位置指定ここから-->
<table id="test">
<tr><td id="aka1"><span>上から下<br>mx[番号]=0; my[番号]=2;</span></td><td id="aka5"><span>左上から右下<br>mx[番号]=2; my[番号]=2;</span></td></tr>
<tr><td id="aka2"><span>下から上<br>mx[番号]=0; my[番号]=-2;</span></td><td id="aka6"><span>右上から左下<br>mx[番号]=-2; my[番号]=2;</span></td></tr>
<tr><td id="aka3"><span>左から右<br>mx[番号]=2; my[番号]=0;</span></td><td id="aka7"><span>左下から右上<br>mx[番号]=2; my[番号]=-2;</span></td></tr>
<tr><td id="aka4"><span>右から左<br>mx[番号]=-2; my[番号]=0;</span></td><td id="aka8"><span>右下から左上<br>mx[番号]=-2; my[番号=2;</span></td></tr>
</table>
<!--★tableの位置指定ここまで-->

<script type="text/javascript"><!--
/*================================================================================ 
複数の領域の背景移動　★2019/01/20
参考：By  http://homepage2.nifty.com/toraneko/haikei/ugoku-haikei.html(とらねこ庵 サイト閉鎖済)
参考：By  http://ijichi.easter.ne.jp/java9/haikei3.htm(オリジナルJavaScript 新サイト)
=================================================================================*/
(function (){ var mx=[],my=[]; //即時関数で囲んでグローバル変数を消すため、この行はこのままで

var Bspd=50; //★移動速度。この数値が小さいと速い

/*■基本■mx[番号]=数値の、数値は右側移動、マイナス数値設定で左側移動、mx[番号]=0だと縦移動のみ。
          my[番号]=数値の、数値は下側移動、マイナス数値設定で上側移動、my[番号]=0だと横移動のみ。
★使用しない番号の行は削除する。数値は自由に変更可。大きくすると速くなる。数値指定を変更して同じ移動方向にしても可*/

mx[1]=0; my[1]=2;   //★上から下
mx[2]=0; my[2]=-2;  //★下から上
mx[3]=2; my[3]=0;   //★左から右
mx[4]=-2; my[4]=0;  //★右から左
mx[5]=2; my[5]=2;   //★左上から右下
mx[6]=-2; my[6]=2;  //★右上から左下
mx[7]=2; my[7]=-2;  //★左下から右上
mx[8]=-2; my[8]=-2; //★右下から左上

var n=8;//★最大番号数。idの#akaや上記のmx[]やmy[]に付けた最大番号。連番ではなく途中の番号が抜けていても可

//指定ここまで----------------------------------------------------------------------------------
function $(id){return document.getElementById(id);}/*document.getElementByIdを簡略化*/
var xp=[], yp=[], L, T, i=1;
for(i=1;i<=n;i++){ xp[i]=0; yp[i]=0; } 
function bgGo() {
   for(i=1;i<=n;i++){
   if (mx[i]===undefined) { continue; }//■抜けている番号は処理しない
   xp[i]+=mx[i]; yp[i]+=my[i]; L=xp[i]+"px"; T=yp[i]+"px";  
   $("aka"+i).style.backgroundPosition=L+" "+T;
}
setTimeout(bgGo,Bspd);
}
bgGo();
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

上から下 mx[番号]=0; my[番号]=2;	左上から右下 mx[番号]=2; my[番号]=2;
下から上 mx[番号]=0; my[番号]=-2;	右上から左下 mx[番号]=-2; my[番号]=2;
左から右 mx[番号]=2; my[番号]=0;	左下から右上 mx[番号]=2; my[番号]=-2;
右から左 mx[番号]=-2; my[番号]=0;	右下から左上 mx[番号]=-2; my[番号=2;

背景移動２■table背景移動・複数設定 最終修正日 : 2019/01/20

　背景移動２■table背景移動・複数設定　　　　　最終修正日 : 2019/01/20