Travel:旅遊明信片

範例結果

單元二:利用Animate建立Banner

S1:利用Animate轉檔為Canvas置於網頁現有內

S2:因Animate持續改版,故加入語法內容在改變,但加入本質改變。

S3:利用jQuery,模擬廣告展示後收合。

<body onload="init();">
	<div class="AD">
		<div class="ADs"><div class="ADdir">關閉<br>廣告</div></div>
		<div id="animation_container" class="ADmain" style="background: #FFFFFF">
			<canvas id="canvas" width="800" height="479"></canvas>
			<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:800px; height:479px;">
			</div>
		</div>
	</div>
</body>
.AD{position: relative;height: 50px;}
.ADs{background: #AEE5E3; height: 50px; width: 800px;
	position:absolute; left: 50%; margin-left: -400px;}
#animation_container{position: absolute;left: 50%; margin-left: -400px; z-index: 999;
			border: 1px solid #000000; box-shadow: 1px 1px 10px #000;}
.ADdir{position: absolute; top: 0px; right: -50px; width: 50px; height: 50px;
	background: #FBAEAF; z-index: 150; cursor: pointer;
 	text-align: center;  box-sizing:border-box;}
//banner AD
	var _IO=true;
	$('.ADdir').click(function(){
		if(_IO){
			$('.ADmain').slideUp();
			$('.ADdir').html('展開<br>廣告');
		}else{
			$('.ADmain').slideDown();
			$('.ADdir').html('關閉<br>廣告');
		}
		_IO=!_IO;
	});
	setTimeout(ADhide,5000);
	function ADhide(){
			$('.ADmain').slideUp();
			$('.ADdir').html('展開<br>廣告');
		_IO=false;
	}