集合写真の様々な利用
数字ボタン（ 1～12）は指定された月の風景、nowは当月の風景、allは集合写真と1月から12月までの風景を時間差で順に描画します。
サンプルコード
<html>
<head>
<meta charset="UTF-8" />
<style>
#scenemain {
max-width:640px;
text-align:center;
border:0px solid blue;
}
</style>
</head>
<body style="max-width:640px; margin:0 auto;">
<DIV id="scenemain">
<h2 style="text-align:center;">季節の12風景 <span style="font-size:12px;">©2020 TacM, Ver0.01</span></h2>
<button onclick="setClip( 0);"> 1</button>
<button onclick="setClip( 1);"> 2</button>
<button onclick="setClip( 2);"> 3</button>
<button onclick="setClip( 3);"> 4</button>
<button onclick="setClip( 4);"> 5</button>
<button onclick="setClip( 5);"> 6</button>
<button onclick="setClip( 6);"> 7</button>
<button onclick="setClip( 7);"> 8</button>
<button onclick="setClip( 8);"> 9</button>
<button onclick="setClip( 9);">10</button>
<button onclick="setClip(10);">11</button>
<button onclick="setClip(11);">12</button>
<button onclick="setClip(12);">now</button>
<button onclick="setClip(13);">all</button>
<BR>
<div id="month" style="padding-top:10px; text-align:center; font-size:24px;">📆</div> <!-- 🌐 -->
<div id="dmy1" style="float:left; width:170px; height:225px; border:0px blue solid;"></div>
<div id="item" style="float:left; position:relative; width:300px; height:225px; overflow:hidden; border:0px solid red;">
<div id="sample" style="position:absolute; left:0px; top:0px; width:900px; height:900px;">
<img src="https://aidesign.lolipop.jp/wp-content/uploads/2020/09/scene3x4.png">
</div>
</div>
<div id="all" style="padding-top:10px; text-align:center; display:none; width:640px;">
<img src="https://aidesign.lolipop.jp/wp-content/uploads/2020/09/scene3x4.png" width="300" height="300">
</div>
</DIV>
</body>
<script type="text/javascript" charset="utf-8">
var status=0;
var m=0;
var p = document.getElementById( "sample" );
function setClip( v ) {
if(v==13){ //all
status=1;
m=0;
document.getElementById('all').style.display="inline-block";
allMonth();
return;
}
else{ //0～12
if(status!=0) {alert("一年の全風景を表示中");return;}
status=0;
if(v==12){ //当月
var date = new Date();
v = date.getMonth();
}
}
outMonth(v);
}
function allMonth(){ //一年の全風景
outMonth(m);
if(++m < 12) setTimeout('allMonth()', 1000);
else {status=0;document.getElementById('all').style.display="none";}
}
function outMonth(v){ //指定月の風景
var x = v % 3; //x:0～2
var y = Math.floor(v / 3); //y:0～3, mon:0～11 => 1～12
p.style.left = (-300*x) + "px"; //オフセットx
p.style.top = (-225*y) + "px"; //オフセットy
document.getElementById('month').innerHTML = (v+1) + "月";
console.log(document.getElementById('month').innerHTML, v, x, y, p.style.left, p.style.top);
}
</script>
</html>