WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:DHTMLで雪を降らせました。スクロールした部分まで降らせるにはどうしたらいいのでしょうか?

0:[投稿] 海 [2007/12/21 02:04 ] [環境:WINXP SAKURA]

DHTMLで雪を降らせることには成功しました。
画像も数種類使えました。
しかし、画面分しか雪が降らず、スクロールして下に行くと、画面分で雪はストップしていて、スクロールした分まで降ってくれません。
どこをどういじっていいのか分からずに、調べまわったのですが、途方に暮れました。
どうか、アドバイス頂けますとありがたいです。
以下が、現在、使っているものです。
宜しくお願い致します。


<style type="text/css">
<!--
.img{
    position:        absolute;
    visibility:        hidden;
}
-->
</style>

<script language="javascript" type="text/javascript">
<!--
var snow_num_max = 30;        // 最大画像数
var dx_spd = 2;                // 横に揺れる速度
var dy_spd = 3;                // 縦に落ちる速度
var dx_wide_min = 20;        // 横の揺れ最小幅
var dx_wide_max = 70;        // 横の揺れ最大幅
var dx_margin = 20;        // ウインドウに対する横端のマージン
var dt_act = 5;                // 処理速度

var scrX,scrY;
var dx = new Array();
var dy = new Array();
var sideTmg = new Array();
var sideFlag = new Array();

function Init(){
    scrX  = GetWindowSize("width");
    scrY  = GetWindowSize("height");
    for(i = 0; i < snow_num_max; i++){
        sideTmg[i] = 0;
        sideFlag[i] = true;
        z = dx_wide_max - dx_wide_min;
        dx[i] = Math.round(Math.random() * z + 0.5) + dx_wide_min;
        x = Math.round(Math.random() * scrX + 0.5) - dx_margin - dx_wide_max;
        x = Math.max(x,(dx_margin + dx_wide_max));
        y = Math.round(Math.random() * scrY + 0.5) - scrY;
        SetLayer("iL"+i,"x",x);
        SetLayer("iL"+i,"y",y);
        SetLayer("iL"+i,"v","visible");
        if(document.all){
            SetLayer("iL"+i,"v","visible");
        }else if(document.layers){
            SetLayer("iL"+i,"v","visible");
        }else if(document.getElementById){
            SetLayer("iL"+i,"v","hidden");
        }
    }
    XY();
}

function XY(){
    for(i = 0; i < snow_num_max; i++){
        // direction X
        if(sideFlag[i]){
            sideTmg[i] += dx_spd;
            if(sideTmg[i] >= dx[i]){
                sideFlag[i] = !sideFlag[i];
            }
        }else{
            sideTmg[i] -= dx_spd;
            if(sideTmg[i] <= -dx[i]){
                sideFlag[i] = !sideFlag[i];
            }
        }
        if(sideFlag[i]){
            x = GetLayer("iL"+i,"x") + dx_spd;
        }else{
            x = GetLayer("iL"+i,"x") - dx_spd;
        }
        SetLayer("iL"+i,"x",x);

        // direction Y
        y = GetLayer("iL"+i,"y") + Math.round(Math.random() * dy_spd + 0.5) - 1;
        if(y >= scrY){
            y = 0;
        }
        SetLayer("iL"+i,"y",y);
    }
    setTimeout("XY()",dt_act)
}

//ウインドウサイズ取得
function GetWindowSize(type){
    switch(type){
        case "width":
            if(document.all){
                return(document.body.clientWidth);
            }else if(document.layers){
                return(innerWidth);
            }else if(document.getElementById){
                return(window.innerWidth);
            }else{
                return(-1);
            }
        break;
        case "height":
            if(document.all){
                return(document.body.clientHeight);
            }else if(document.layers){
                return(innerHeight);
            }else if(document.getElementById){
                return(window.innerHeight);
            }else{
                return(-1);
            }
        break;
        default:
            return(-1);
        break;
    }
}

// レイヤーゲット
function GetLayer(lay,dir){
    if(document.all){
        if(dir == "x"){
            return(document.all(lay).style.posLeft);
        }else if(dir == "y"){
            return(document.all(lay).style.posTop);
        }else{
            return(-1);
        }
    }else if(document.layers){
        if(dir == "x"){
            return(document.layers[lay].left);
        }else if(dir == "y"){
            return(document.layers[lay].top);
        }else{
            return(-1);
        }
    }else if(document.getElementById){
        if(dir == "x"){
            return(parseInt(document.getElementById(lay).style.posLeft));
        }else if(dir == "y"){
            return(parseInt(document.getElementById(lay).style.posTop));
        }else{
            return(-1);
        }
    }
}

// レイヤーセット
function SetLayer(lay,dir,z){
    if(document.all){
        if(dir == "x"){
            document.all(lay).style.posLeft = z;
        }else if(dir == "y"){
            document.all(lay).style.posTop = z;
        }else if(dir == "v"){
            document.all(lay).style.visibility = z;
        }
    }else if(document.layers){
        if(dir == "x"){
            document.layers[lay].left = z;
        }else if(dir == "y"){
            document.layers[lay].top = z;
        }else if(dir == "v"){
            if(z == "visible"){
                z = "show";
            }else{
                z = "hidden";
            }
            document.layers[lay].visibility = z;
        }
    }else if(document.getElementById){
        if(dir == "x"){
            document.getElementById(lay).style.posLeft = z;
        }else if(dir == "y"){
            document.getElementById(lay).style.posTop = z;
        }else if(dir == "v"){
            document.getElementById(lay).style.visibility = z;
        }
    }
}

// -->
</script>
</head>

<body onload="Init()">

<div class="img" id="iL0"><img src="../snow/0.gif" alt=""></div>
<div class="img" id="iL1"><img src="../snow/1.gif" alt=""></div>
<div class="img" id="iL2"><img src="../snow/1.gif" alt=""></div>
<div class="img" id="iL3"><img src="../snow/0.gif" alt=""></div>
<div class="img" id="iL4"><img src="../snow/1.gif" alt=""></div>
<div class="img" id="iL5"><img src="../snow/2.gif" alt=""></div>
<div class="img" id="iL6"><img src="../snow/0.gif" alt=""></div>
<div class="img" id="iL7"><img src="../snow/1.gif" alt=""></div>
<div class="img" id="iL8"><img src="../snow/2.gif" alt=""></div>
<div class="img" id="iL9"><img src="../snow/0.gif" alt=""></div>
<div class="img" id="iL10"><img src="../snow/1.gif" alt=""></div>
<div class="img" id="iL11"><img src="../snow/2.gif" alt=""></div>
<div class="img" id="iL12"><img src="../snow/0.gif" alt=""></div>
<div class="img" id="iL13"><img src="../snow/1.gif" alt=""></div>
<div class="img" id="iL14"><img src="../snow/2.gif" alt=""></div>
<div class="img" id="iL15"><img src="../snow/0.gif" alt=""></div>
<div class="img" id="iL16"><img src="../snow/1.gif" alt=""></div>
<div class="img" id="iL17"><img src="../snow/2.gif" alt=""></div>
<div class="img" id="iL18"><img src="../snow/0.gif" alt=""></div>
<div class="img" id="iL19"><img src="../snow/1.gif" alt=""></div>
<div class="img" id="iL20"><img src="../snow/2.gif" alt=""></div>
<div class="img" id="iL21"><img src="../snow/0.gif" alt=""></div>
<div class="img" id="iL22"><img src="../snow/1.gif" alt=""></div>
<div class="img" id="iL23"><img src="../snow/2.gif" alt=""></div>
<div class="img" id="iL24"><img src="../snow/0.gif" alt=""></div>
<div class="img" id="iL25"><img src="../snow/1.gif" alt=""></div>
<div class="img" id="iL26"><img src="../snow/2.gif" alt=""></div>
<div class="img" id="iL27"><img src="../snow/0.gif" alt=""></div>
<div class="img" id="iL28"><img src="../snow/1.gif" alt=""></div>
<div class="img" id="iL29"><img src="../snow/2.gif" alt=""></div>

回答(必須): 状態:

お名前(必須):

URL:




[戻る]