動く背景１１　本体クリック背景移動　

とらねこ庵サイトの『動く背景』と、スライドショーの『自動でもクリックでも』のJavaScriptを合成しました。画像をクリックすると、停止と移動を繰り返します。

そしてCSSで背景画像サイズ指定を、background-size: 25% auto; としたので、box(divで囲んで作った空間)サイズや画像サイズに関係なく、横４枚表示になってます。
『20% auto』なら５枚表示、『100% auto』なら全面１枚表示です。
サイズを気にすることなく、簡単に指定できます。
←左が、本当の画像実寸。横494px縦700pxです。

とても便利なbackground-sizeプロパティについては、こちらのサイトに詳しい説明があります。

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

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

<!--★ここからコピー。 #akaを忘れずに -->
<style type="text/css">
<!--
body{ background-color :#dadada;}

#aka{
      background-image: url(ema1.jpg); /*★背景画像指定*/ 
      background-size: 25% auto; /*★背景画像サイズ指定。横に４枚並べる*/
      /*★以下は好みで指定*/
      width:1000px;
      height:200px;
      border-radius: 20px;  /*★角丸指定*/
      box-shadow: 5px 5px 10px  #333333 inset;  /*★影付き内側*/
      border: 1px solid #ffffff;
}
-->
</style>

<script type="text/javascript">
<!--
/*************************************************************   
背景移動参考サイト：とらねこ庵 (http://homepage2.nifty.com/toraneko/index.html)
★画像クリックで移動と停止するよう改造  2014/06/26
****************************************************************/
var xp = 0, yp = 0;
var move=2;      // ★移動量。小さいほどなめらか。大きいほど速い。
var speed=100;   // ★移動スピード。小さいほど速い

var stop = false;
var read;

function bgGo() {
    document.getElementById("aka").style.backgroundPosition = 
    xp + "px " + yp + "px";
    xp += 0;
    yp -= move;
}

function Set() {
if (stop == true) {
stop = false;
window.clearInterval(read);}
else if (stop == false) {
stop = true;
read = setInterval("bgGo()",speed );
}}
// -->
</script>
<!--★ここまでコピー　bodyの中にもコピーがあります-->

</head>

<body onload="Set();">
<!--★↑bodyタグの中の onload="Set();"も記述して下さい。ただし、最初は静止状態から始めたい場合は、ここの記述は不要です-->

<br><br><br>

<!--★ここからコピー-->
<div align="center">
<!--★背景画像用のbox指定。必ずid="aka"とonClick="Set();"を記述-->
<div id="aka" onClick="Set();" title="画像クリックで移動と停止を繰り返します"></div>
<p>■画像をクリックすると移動が停止し、またクリックすると移動開始します。■</p>
</div>
<!--★ここまでコピー-->


<p>とらねこ庵サイトの『動く背景』と、スライドショーの『自動でもクリックでも』のJavaScriptを合成しました。
画像をクリックすると、停止と移動を繰り返します。<br>
<br>
そしてCSSで背景画像サイズ指定を、background-size: 25% auto; としたので、box(divで囲んで作った空間)サイズや画像サイズに関係なく、横４枚表示になってます。<br>
『20% auto』なら５枚表示、『100% auto』なら全面１枚表示です。<br>
サイズを気にすることなく、簡単に指定できます。<br> 
本当の画像実寸は、横494px縦700pxです。<br>
<br>
とても便利なbackground-sizeプロパティについては、<a href="http://www.htmq.com/css3/background-size.shtml" target="_new" title="HTMLクイックリファレンス">こちらのサイト</a>に詳しい説明があります。</p>

</body>
</html>

動く背景１１■部分■ 本体クリック背景移動 最新修正日 : 2014/07/10

　動く背景１１■部分■　本体クリック背景移動　　　　　　最新修正日 : 2014/07/10