背景移動６■左端移動　上へ

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

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

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(mh3.png) #def repeat-y;}/*★背景画像、背景色、縦の繰り返し指定*/

/*★タイトル文字指定。不要なら削除*/
.test1{
position:absolute;/*★位置指定お好みで*/
top:30px;/*★上からの位置。お好みで*/
left:100px;/*★左からの位置。お好みで*/
color: #fc0;/*★文字色　オレンジ色*/
font-size:32px;/*★文字サイズ指定*/
font-weight: bold;/*★太字指定*/
opacity:0.9;/*★透過指定。文字色を薄くする。お好みで*/
text-shadow: 5px 5px 5px #888;/*★影指定。お好みで*/
}
--></style>
<!--★ここまでコピー　bodyの中にもコピーがあります-->

</head>
<body>

<p class="test1">◆◆動くJavaScript◆◆</p><!--★タイトル文字。見本のため削除-->

<!--★ここからコピー-->
<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 (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

//★左端移動の時はmx=0で指定
var mx=0;    //★右側へ移動する距離。マイナス数値で左側移動。0だと縦移動のみ。両方の数値指定で斜め移動。数値が大きいと速い
var my=-2;   //★下側へ移動する距離。マイナス数値で上側移動。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