背景移動７■上端移動　右へ

●2017/07/23：即時関数で囲んで、グローバル変数を消しました。
背景移動のJavaScriptついては、とらねこ庵とオリジナルJavaScriptを参考に、2015/06/16より少しずつリニューアルします。

背景移動のJavaScriptで、cssで上端指定をして、左→右へ動かしてます。
速度や移動方向が違うだけで、JavaScriptのソースは背景移動３■空の全面背景移動と同じです。
違うのはCSSのbodyの背景画像の指定です。
初期値はrepeat-repeatの全面敷き詰め指定で、何も指定しないと自動的にこの選択になります。
repeat-xは今回の見本で、背景画像は上端指定になります。
この指定の時は、背景移動を上下移動や斜め移動にすると、移動した後は消えてしまうので注意して下さい。
上端指定の時は、右→左や左→右の左右移動しか指定できません。
斜め移動が可能なのは、敷詰指定の時だけです。

CSS使用の　上端移動　右へはこちら　→　背景移動７-１■CSS 上端移動　右へ

<!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>背景移動７■上端移動　右へ</title>

<!--★ここからコピー-->
<style type="text/css"><!--
body{background:url(kc3_sm.jpg) #e5eff8 repeat-x;}/*★背景画像、背景色、横の繰り返し指定*/

/*★タイトル文字指定。不要なら削除*/
.test1{
color:#fff;/*★文字色　白*/
font-size:30px;/*★文字サイズ指定*/
font-weight: bold;/*★太字指定*/
opacity:0.5;/*★透過指定。文字色を薄くする。お好みで*/
text-shadow: 2px 2px 2px #000;/*★影指定。お好みで*/
}
--></style>
<!--★ここまでコピー。bodyの中にもコピーがあります-->

</head>
<body>

<p class="test1">◆◆動くJavaScript◆◆</p><!--★タイトル文字。見本のため削除-->
<img src="katu1.gif" style="position:absolute; top:100px; right:200px;width:205px;height:36px;"><!--★サンタクロース画像。見本のため削除-->

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

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

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

</body>
</html>

背景移動７■上端移動 右へ 最終修正日 : 2017/07/23

　背景移動７■上端移動　右へ　　　　　最終修正日 : 2017/07/23