画像が降る上る５-１■花が散る -sna WORLD原本-

<!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>画像が降る上る５-１■花が散る -sna WORLD原本-</title>

<!--★背景画像指定ここから。不要なら削除-->
<style type="text/css"><!--
body{
background:url(gat5.jpg) no-repeat #ffc;/*★背景画像指定。繰り返し無し。背景色薄黄色*/
background-size:100% auto;/*★背景画像横幅100%指定。見本の画像の実寸は横800px縦658px*/
}
--></style>
<!--★背景画像指定ここまで-->

<!--★ここからコピー-->
<script type="text/javascript">
<!--
/*=====================================================================
Script Coded & Copyright By Snappy
E-Mail Address : metis@plum.freemail.ne.jp
WEB Site URI : http://homepage3.nifty.com/metis/ (sna WORLD)
========================================================================*/
var num = 10;				// 振らせる画像の数
var time = 50;				// 画像を振らせる間隔（ミリ秒単位）
var imgArray = new Array(num);

function initImage() {
    if(!document.getElementById) return;
    for(i = 0; i < imgArray.length; i++) {
        var img = document.createElement("IMG");

		img.src = document.all("img").src

		//●画像の横幅と高さ
		img.width = 36; 
		img.height = 36;	 
	
		img.style.position = "absolute";	
		
		// 画像の降り始めの位置を計算
		img.style.left = scrollLeft() + Math.floor(Math.random() * (winWidth() - img.width)) + "px";
		img.style.top = scrollTop() + Math.floor(Math.random() * (winHeight() - img.height)) + "px";

        document.body.appendChild(img);
        imgArray[i] = img;
    }
    setTimeout("fallLeaves()", time);
}

function fallLeaves () {
    for(i = 0; i < imgArray.length; i++) {
        var img = imgArray[i];
        var x = parseInt(img.style.left);
        var y = parseInt(img.style.top);
        y += 2 + Math.floor(Math.random() * 2);
		
		// 一番下まで行ったらまた元に戻す処理
        if(y > scrollTop() + winHeight() - img.height) {
             y = scrollTop();
             x = scrollLeft() + Math.floor(Math.random() * winWidth());
        }
		// まだ下まで行ってなかったら左右に揺らす
        else {
			x += Math.floor(Math.sin(y/40)*2);

			// 画面からはみ出たら一番端の位置にする
			if(x < scrollLeft()) x = scrollLeft();
			else if(x > scrollLeft() + winWidth() - img.width)
               x = scrollLeft() + winWidth() - img.width;
        }
        img.style.left = x + "px";
        img.style.top = y + "px";
    }
    setTimeout("fallLeaves()", 50);  
}

// 今開いている IE の画面の幅を調べる
function winWidth () {
    if(window.innerWidth)
        return window.innerWidth;
    if(document.compatMode == "CSS1Compat")
        return document.body.parentNode.clientWidth;
    if(document.body.clientWidth)
        return document.body.clientWidth;
    return 600;
}

// 今開いている IE の画面の高さを調べる
function winHeight () {
    if(window.innerHeight)
        return window.innerHeight;
    if(document.compatMode == "CSS1Compat")
        return document.body.parentNode.clientHeight;
    if(document.body.clientHeight)
        return document.body.clientHeight;
    return 400;
}

// 左端の位置を調べる
function scrollLeft () {
    if(window.pageXOffset)
        return window.pageXOffset;
    if(document.compatMode == "CSS1Compat")
        return document.body.parentNode.scrollLeft;
    if(document.body.scrollLeft)
        return document.body.scrollLeft;
    return 0;
}

// 下端の位置を調べる
function scrollTop () {
    if(window.pageYOffset)
        return window.pageYOffset;
    if(document.compatMode == "CSS1Compat")
        return document.body.parentNode.scrollTop;
    if(document.body.scrollTop)
        return document.body.scrollTop;
    return 0;
}
//-->
</script>
<!--★ここまでコピー。bodyの中に降る画像指定があります-->


</head>
<body onload="initImage();">
<!--★↑bodyタグの中の onload="initImage();"も記述して下さい-->
<!-- ●↓降る画像の指定 -->
<img src="tt1.png" id="img" height="0">
<!--★記述終了-->

</body>
</html>
降る上る５-１■画像A■花が散る-sna WORLD原本-

　降る上る５-１■画像A■花が散る-sna WORLD原本-　　　　
