背景移動１２■ボタンクリック背景移動上下

画像の中の右端の赤いボタンをクリックして移動を操作できます。▲で上へ移動、■で停止、▼で下へ移動。

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

背景移動と、HIMAJINサイトのボタン操作(JavaScript)を合成して作成しました。
tableの背景画像が上下に移動するJavaScriptです。
画像の右端に設置した赤いボタンをクリックして、背景画像を上へ移動させたり、下へ移動させたり、停止させたりが可能です。

背景画像をdiv空間ではなくテーブル(table)にしたのは、div空間よりもボタン設置が簡単だからです。
お好みでdiv空間に変更して下さい。
その時はdivにid="akaB"を指定し、ボタンはtdではなく、pか別のdivに class="bt"を指定します。

今回も、背景画像サイズ指定を使用。background-size: 100% auto;です。
横幅一杯の100%表示なので、使用した画像の実寸よりも拡大表示になります。
実際の画像は横幅800px縦幅450pxです。

■2016/04/02：ボタン操作の参考サイトを変更したので、ソースが短くなりました。

<!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-color:#cc9;}/*★背景色指定。灰緑色。好みで変更*/

/*★背景移動表示領域指定*/
#akaB{
margin-top:30px;/*★上からの位置*/
width:100%;/*★テーブルの横幅。横幅一杯表示*/
height:200px;/*★テーブルの縦幅*/
background:url(pan2.jpg);/*★テーブルの背景画像指定。実寸は横800px縦450px*/
background-size: 100% auto;/*★背景画像の横幅一杯の表示*/
box-shadow:5px 5px 10px rgba(0,0,0,0.5) inset;/*★上と下の影指定。不要なら削除*/
}

/*★ボタン指定*/
.bt{
width:30px;/*★ボタン表示領域のtableのtd(セル)の横幅*/
line-height:1.3;/*★ボタン同士の行間*/
color:#f00;/*★移動ボタンの色指定。赤色。好みで変更*/
font-size:24px;/*★ボタン文字のサイズ*/
cursor: pointer;/*★カーソルを手の形にする*/
}
.bt span{background:#000;}/*★ボタンの背景色。黒色。不要なら削除*/

/*★タイトル文字指定。tableのtdに指定。不要なら削除*/
.test1{
text-align:right;/*★右側位置*/
vertical-align:middle;/*★中央位置*/
color: #fff;/*★文字色　白*/
font-size:36px;/*★文字サイズ指定*/
font-weight: bold;/*★太字指定*/
opacity:0.5;/*★透過指定。文字色を薄くする*/
}
--></style>
<!--★ここまでコピー　bodyの中にもコピーがあります-->

</head>
<body>

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

<!--★必ずid="akaB"を記述。後は自分の好みで-->
<table id="akaB"><tr>

<!--★もしこの背景画像の中に文字をいれたければ、ここに記入↓-->
<td  class="test1">
◎動くJavaScript◎
<!--★文字の記入ここまで↑-->
</td>
<td class="bt">
<span title="上へ" id="bup">▲</span><br>
<span title="停止" id="bstop">■</span><br>
<span title="下へ" id="bdown">▼</span>
</td>
</tr></table><!--★移動領域のid="akaB"の指定ここまで-->

<p style="text-align:center; color:#000;">画像の中の右端の赤いボタンをクリックして移動を操作できます。▲で上へ移動、■で停止、▼で下へ移動。</p>

<script type="text/javascript"><!--
/*====================================================================  
文字ボタンクリック背景移動上下   ボタン参考：HIMAJIN(http://himajin.moo.jp/java/imgch/frame3.html)★2016/04/02
背景移動参考：とらねこ庵 (http://homepage2.nifty.com/toraneko/index.html)
背景移動参考：オリジナルJavaScript（http://jun88.6.ql.bz/java9/haikei3.htm）　
=====================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

var move=4;    //★移動量。大きいほど速い
var Bspd=100;　//★数値を小さくするほど速い

//指定ここまで--------------------------------------------------------------
var flag_c=1, yp=0;
function bgGo() {
if(!flag_c){yp+=move;}/*下へdown*/
else if(flag_c===1){yp-=move;}/*上へup*/
akaB.style.backgroundPosition=0+"px "+yp+"px";
setTimeout(bgGo, Bspd);
}
bup.onclick=function(){flag_c=1;}/*上へup*/
bstop.onclick=function(){flag_c=2;}/*停止*/
bdown.onclick=function(){flag_c=0;}/*下へdown*/
bgGo();
}());//即時関数終了
// --></script>
<!--★ここまでコピー-->

</body>
</html>

背景移動１２■ボタンクリック背景移動上下 最終修正日 : 2016/04/02

　背景移動１２■ボタンクリック背景移動上下　　　　　最終修正日 : 2016/04/02