動く背景１４　八方向背景移動拡大ボタン　

画像の端にマウスを置いてみて下さい。マウスの位置の方向に画像が移動します。八方向が設定してあります。

クリックで停止クリックで元の大きさクリックで150%拡大クリックで200%拡大クリックで250%拡大クリックで300%拡大

移動を停止するには、STOPボタンをクリックして下さい。画像にマウスオンすると、また移動します。
その横の紫色のボタンは画像の拡大ボタンです。大きなボタンを押すと拡大し、小さなボタンを押すと縮小します。

実際の画像の大きさは横1000px縦653pxの大きさですが、Seamew（シーミュー）で、シームレス加工をしています。

◆全ソース◆
ソースの中でマウスの右クリックで『すべて選択』した後に、
再度右クリックして『コピー』

<!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>

<!--★ここからコピー 　table#akaを忘れずに。背景画像は好みの画像を指定 -->
<style type="text/css">
<!--
body{background-color:#eeeeee;}

table#aka {
width:600px;　　
height:300px;
background: url(gat19sm.jpg); /*★背景画像指定*/
background-size:100% auto;  /*★最初の背景画像のサイズ指定*/
border-radius: 20px; /*★角丸指定*/
box-shadow: 5px 5px 10px #333333 inset; /*★影内側*/
border: 5px solid #ffffff;
}

table#aka td{width:200px;height:100px;}/*★テーブルを3x3で９分割したので、セルのサイズ指定*/

img.sb{margin:0px 10px;}/*★ボタン同士の間隔を指定*/

img.sb:hover{
    position: relative;/*★ボタンがクリック時にずれる指定*/
    top: 1px;
    left: 1px;
    cursor: pointer;
}
-->
</style>
<!--★ここまでコピー　bodyの中にもコピーがあります-->

</head>
<body onload="bgGo('right');">
<!--★↑bodyタグの中の  onload="bgGo('right');"も記述して下さい。静止状態で始めたい時は、削除して下さい-->

<br><br><br>


<p>画像の端にマウスを置いてみて下さい。マウスの位置の方向に画像が移動します。八方向が設定してあります。</p>

<!--★ここからコピー-->
<div align="center">
<table id="aka" title="画像の端にマウスを載せるとその方向に移動します"><tr>
<td onmouseover="bgGo('left_up');"></td><td onmouseover="bgGo('up');"></td><td onmouseover="bgGo('right_up');"></td></tr>

<tr><td onmouseover="bgGo('left');"></td><td></td><td onmouseover="bgGo('right');"></td></tr>

<tr><td onmouseover="bgGo('left_down');"></td><td onmouseover="bgGo('down');"></td><td onmouseover="bgGo('right_down');"></td>
</tr></table>

<p>
<img src="ch2.png" class="sb" onclick="bgGo('stop')" title="クリックで停止">

<!--★画像拡大ボタン指定。不要なら削除ここから-->
<img src="ch3.png" class="sb" onclick="bBig('b100')" title="クリックで元の大きさ">
<img src="ch4.png" class="sb" onclick="bBig('b150')" title="クリックで150%拡大">
<img src="ch5.png" class="sb" onclick="bBig('b200')" title="クリックで200%拡大">
<img src="ch6.png" class="sb" onclick="bBig('b250')" title="クリックで250%拡大">
<img src="ch7.png" class="sb" onclick="bBig('b300')" title="クリックで300%拡大">
<!--★画像拡大ボタン指定。不要なら削除ここまで-->
</p>

</div>
<!--★コピーここまで。下にもコピーがあります -->

<p>移動を停止するには、STOPボタンをクリックして下さい。画像にマウスオンすると、また移動します。<br>
その横の紫色のボタンは画像の拡大ボタンです。大きなボタンを押すと拡大し、小さなボタンを押すと縮小します。</p>
<hr>
<p>実際の画像の大きさは横1000px縦653pxの大きさですが、<a href="http://www.vector.co.jp/magazine/softnews/050514/n0505146.html" target="_new" title="Vector">Seamew（シーミュー）</a>で、シームレス加工をしています。</p>

<!--★コピーここから -->
<script type="text/javascript">
<!--
/*************************************************************   
背景移動参考サイト：とらねこ庵 (http://homepage2.nifty.com/toraneko/index.html)
移動ボタン参考サイト：ミスティーネット フリー素材集(http://sozai.misty.ne.jp/)
tableリンク参考サイト：そうそうTOWN (http://fefnir.com/)
css変更参考サイト：誰かのホームページ(http://www.24w.jp/)
****************************************************************/
var xp = 0, yp = 0;
timerID = null; // タイマ変数初期化
var speed=50; //★大きいほどゆっくり
var move=2;   //★移動px。大きいほど速い
function bgGo(mode) {
    document.getElementById("aka").style.backgroundPosition = 
    xp + "px " + yp + "px";

		if (mode == 'stop') {
			clearTimeout(timerID); }

		else if (mode == 'right'){
				xp += move;
                                yp += 0;
				clearTimeout(timerID);
				timerID = setTimeout("bgGo('right')", speed); } 

		else if (mode == 'left'){
				xp -= move;
                                yp += 0;
				clearTimeout(timerID);
				timerID = setTimeout("bgGo('left')", speed); }

		else if (mode == 'up'){
				xp += 0;
                                yp -= move;
				clearTimeout(timerID);
				timerID = setTimeout("bgGo('up')", speed); } 

		else if (mode == 'down'){
				xp += 0;
                                yp += move;
				clearTimeout(timerID);
				timerID = setTimeout("bgGo('down')", speed); } 

		else if (mode == 'right_up'){
				xp += move;
                                yp -= move; ;
				clearTimeout(timerID);
				timerID = setTimeout("bgGo('right_up')", speed); } 

		else if (mode == 'left_up'){
				xp -= move;
                                yp -= move ;
				clearTimeout(timerID);
				timerID = setTimeout("bgGo('left_up')", speed); }

		else if (mode == 'right_down'){
				xp += move;
                                yp += move;
				clearTimeout(timerID);
				timerID = setTimeout("bgGo('right_down')", speed); } 

		else if (mode == 'left_down'){
				xp -= move ;
                                yp += move;
				clearTimeout(timerID);
				timerID = setTimeout("bgGo('left_down')", speed); } }

/*★画像拡大部分。画像拡大しないなら削除ここから*/
    function bBig(i) {
        var table = document.getElementById("aka");
		if (i == 'b100') {
			table.style.backgroundSize = "100% auto"; }

		else if (i == 'b150'){
			table.style.backgroundSize = "150% auto"; } 

		else if (i == 'b200'){
			table.style.backgroundSize = "200% auto"; }

		else if (i == 'b250'){
			table.style.backgroundSize = "250% auto"; }

		else if (i == 'b300'){
			table.style.backgroundSize = "300% auto"; } }
/*★画像拡大部分。画像拡大しないなら削除ここまで*/
// -->
</script>
<!--★コピーここまで -->

<br><br>
</body>
</html>

動く背景１４■部分■ 八方向背景移動拡大ボタン UP日時 : 2014/07/10

　動く背景１４■部分■　八方向背景移動拡大ボタン　　　　　UP日時 : 2014/07/10