日別アーカイブ: 2020-10-24

一年の代表風景

ものづくり筆耕ブログ

集合写真の様々な利用

数字ボタン（ 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風景&emsp;<span style="font-size:12px;">&copy;2020 TacM, Ver0.01</span></h2>
<button onclick="setClip( 0);">&nbsp;1</button>
<button onclick="setClip( 1);">&nbsp;2</button>
<button onclick="setClip( 2);">&nbsp;3</button>
<button onclick="setClip( 3);">&nbsp;4</button>
<button onclick="setClip( 4);">&nbsp;5</button>
<button onclick="setClip( 5);">&nbsp;6</button>
<button onclick="setClip( 6);">&nbsp;7</button>
<button onclick="setClip( 7);">&nbsp;8</button>
<button onclick="setClip( 8);">&nbsp;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;">&#x1f4c6;</div>	<!-- &#x1f310; -->
<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>