ふわふわ１６　サンタの直線移動

原本は気球ですが、季節柄サンタクロースが直線移動するJavaScriptです。
見本ではoverflow:hidden;設定でスクロールバーを消しています。スクロールの必要な縦長のページなら、この行は削除して下さい。
見る人のPCでスクロールバーが必要かどうか微妙な時は　overflow:scroll;/*★最初からスクロールバー設定*/　　で。

原本の古いブラウザ対応分を削除して、HTML5対応にして簡略化しました。原本はホームページ研究室から。

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

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

<!--★ここからコピー-->
<style type="text/css">
<!--
body{
overflow:hidden;/*★スクロールバーを消す。説明文参照*/
background:#7bd;/*★背景色指定　水色*/
}
-->
</style>
<!--★ここまでコピー。bodyの中にもコピーがあります-->

</head>

<body>

<!--★下１行コピー。直線移動をする画像の指定。ここではサンタ。必ずid="sen"を記述-->
<img src="katu4.gif" id="sen">


<div style="margin:100px 100px 30px; background:#bef;padding:20px;border-radius:20px;">
<p>原本は気球ですが、季節柄サンタクロースが直線移動するJavaScriptです。<br>
見本ではoverflow:hidden;設定でスクロールバーを消しています。スクロールの必要な縦長のページなら、この行は削除して下さい。<br>
見る人のPCでスクロールバーが必要かどうか微妙な時は　overflow:scroll;/*★最初からスクロールバー設定*/　　で。<br>
<br>
原本の古いブラウザ対応分を削除して、HTML5対応にして簡略化しました。原本は<a href="http://homepage2.nifty.com/godakaz/laboratory/moving/paragura.html" target="_new">ホームページ研究室</a>から。
</p>
</div>

<!--★ここからコピー-->
<script type="text/javascript">
<!--
/*=====================================================================================
直線移動　By  http://homepage2.nifty.com/godakaz/laboratory/moving/paragura.html
サイト名：ホームページ研究室　　http://homepage2.nifty.com/godakaz/laboratory/
★原本の古いブラウザ対応分を削除、HTML5対応にして簡略化。　　2014/12/02
=======================================================================================*/
var x=0, y=0;
var xstep=5, ystep=3;
var tspan=50;//★原本10　数値が大きいほど遅い
var iw=sen.offsetWidth;
var ih=sen.offsetHeight;

var winH=document.documentElement.clientHeight;
var winW=document.documentElement.clientWidth;
winH = Math.round(winH);
winW = Math.round(winW-iw);

function set(){
	x+=xstep;
	y+=ystep;
	if (x<1 || x>winW){xstep=-1*xstep};
	if (y>winH){y=-ih-10};
	sen.style.left=x+"px";
	sen.style.top=y+"px";
	sen.style.position="absolute";
        sen.style.zIndex=4;  //★原本の数値4だが、変更可能
        setTimeout("set()",tspan);
}
window.onload=set;
// -->
</script>
<!--★コピーここまで-->

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

ふわふわ１６ サンタの直線移動 UP日時 : 2014/12/02

　ふわふわ１６　サンタの直線移動　　　　UP日時 : 2014/12/02