背景移動１■box背景移動

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

今回、できるだけソースを短く、方向や速度の変更がしやすいように改造しました。
divで作成したbox空間での背景移動ですが、tableを作成して、tableに id="aka" を指定しても動作します。
背景画像に使用する画像も、div や table のサイズよりも大きくても動作します。見本は小さな画像使用です。

CSS使用のbox背景移動はこちら　→　背景移動１-１■CSS box背景移動
移動方向の数値の入れ方の参考はこちら　→　背景移動２■table背景移動・複数設定

<!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>背景移動１■box背景移動</title>

<!--★ここからコピー-->
<style type="text/css"><!--
/*★移動領域boxの設定。#aka必須*/
#aka{
margin:100px auto 30px;/*★中央位置指定(上　左右　下)*/
background: url(ww3.jpg);/*★背景画像指定。背景画像の実寸は横213px縦221px*/
width:350px;/*★横幅指定*/
height:200px;/*★縦幅指定*/
border:solid 2px #000;/*★枠線指定　黒色*/
text-align:center;/*★文字の中央位置指定*/
}
--></style>
<!--★ここまでコピー。bodyの中にもコピーがあります-->

</head>
<body>

<!--★ここからコピー-->

<div id="aka"><!--★移動領域の指定ここから。必ずid="aka"を記述。後は自分の好みで-->
<br><br>
CONTENTS<br><br>
PROFILE<br>
BBS<br>
</div><!--★移動領域の指定ここまで-->

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

var mx=2;    //★右側へ移動する距離。マイナス数値で左側移動。0だと縦移動のみ。両方の数値指定で斜め移動。数値が大きいと速い
var my=2;    //★下側へ移動する距離。マイナス数値で上側移動。0だと横移動のみ。両方の数値指定で斜め移動。数値が大きいと速い
var Bspd=50; //★移動速度。この数値が小さいと速い

//指定ここまで---------------------------------------------------------------
function $(id){return document.getElementById(id);}/*document.getElementByIdを簡略化*/
var xp=0, yp=0, L, T; 
function bgGo(){xp+=mx; yp+=my; L=xp+"px"; T=yp+"px"; $("aka").style.backgroundPosition=L+" "+T; setTimeout(bgGo,Bspd);}
bgGo();
}());//即時関数終了
//--></script>
<!--★ここまでコピー-->

</body>
</html>

背景移動１■box背景移動 最終修正日 : 2019/01/20

　背景移動１■box背景移動　　　　　最終修正日 : 2019/01/20