7

下面是我的 Javascript 文件。雪在开始时看起来都很好,但是当它们中的一些到达屏幕底部时,就会发生某种奇怪的行为。雪开始出现意外行为,并以非编程方式反复上下移动。

我无法通过说明我的代码来弄清楚为什么。谁能给我一个关于我哪里出错的指针?

提前致谢!

/*
1. mimic the snow falling
*/

$(document).ready(function(){  



// get the height and width of the browser window
var windowHeight = $(window).height();
var windowWidth = $(window).width();

// set the height and width of the #snowingScreen div equivalent to that of the window's
$('#snowingScreen').css('height', windowHeight);
$('#snowingScreen').css('width', windowWidth);  


// this function is to generate snow randomly scattered around screen
function generateSnow() {

    // generate snow using a for loop
    for(i=0; i<4; i++){

        // randomize the top position of the snow
        var snowTop = Math.floor(Math.random()* (windowHeight/2) );     

        // randomize the left position of the snow
        var snowLeft = Math.floor(Math.random()* (windowWidth - 10) );  

        // appending the snow to the #snowingScreen
        $('#snowingScreen').append(

            // generate the div representing the snow and setting properties using various jQuery methods               
            $('<div />')
                .addClass('snow')
                .css('top', snowTop)
                .css('left', snowLeft)
                .text('*')
        );

    }

    // repeat the generateSnow() function for each 3 seconds
    window.setTimeout(generateSnow, 3000);      

}

// this function is to alter the position of each snow, using the handy .each() jQuery method
function snowFalling(){

    // move the snow
    $('.snow').each(function(key, value){

        // check if the snow has reached the bottom of the screen
        if( parseInt($(this).css('top')) > windowHeight - 80 ) {

            // remove the snow from the HTML DOM structure
            $(this).remove();
        }       

        // set up a random speed
        var fallingSpeed = Math.floor(Math.random() * 5 + 1);

        // set up a random direction for the snow to move
        var movingDirection = Math.floor(Math.random()*2);

        // get the snow's current top
        var currentTop = parseInt($(this).css('top'));      

        // get the snow's current top
        var currentLeft = parseInt($(this).css('left'));                

        // set the snow's new top
        $(this).css('top', currentTop + fallingSpeed ); 

        // check if the snow should move to left or move to right
        if( movingDirection === 0){

            // set the snow move to right
            $(this).css('left', currentLeft + fallingSpeed );   

        }else {

            // set the snow move to left
            $(this).css('left', currentLeft + -(fallingSpeed) );                

        }                   

    });         

    // repeat the rollIt() function for each 200 microseconds
    window.setTimeout(snowFalling, 200);            

}        

// call the function when the document is loaded completely
generateSnow();   
snowFalling();

});

jsfiddle:http: //jsfiddle.net/dennisboys/8BNbh/2/embedded/result/

4

1 回答 1

7

在函数 generateSnow 中,改变这一行

$('<div />')
                .addClass('snow')
                .css('top', snowTop)
                .css('left', snowLeft)
                .text('*')

$('<div />')
                .addClass('snow')
                .css('top', snowTop)
                .css('left', snowLeft)
                .css('position','absolute')
                .text('*')

删除位置:相对;在雪类 css 文件中。

请参阅http://jsfiddle.net/8BNbh/6/中的工作示例

于 2013-08-27T10:33:21.270 回答