0

对不起，但我是一个有代码的大菜鸟，我正试图弄清楚如何让云在天空中以随机间隔水平移动。这是一个链接：https ://dl.dropbox.com/u/34829763/americasrole/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>What's America's role in our world?</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <meta charset="utf-8">
    <script src="jquery-1.8.2.min.js"></script>
</head>
<body>
    <div id="background">
        <img class= "cloud" id="cloud1" src="cloud1.png"/>
        <img class= "cloud" id="cloud2" src="cloud1.png"/>
        <img class= "cloud" id="cloud3" src="cloud1.png"/>
        <img class= "cloud" id="cloud4" src="cloud1.png"/>
    </div>
    <div id="foreground">
        <img id="fg" src="foreground.png"/>
    </div>

<script>
$(document).ready(function() {
    var delay = 2000;
    var $cloud = $('.cloud');
    var numRand = Math.floor(Math.random()*2000)+9000;
    function runIt() {
        $cloud.animate({
            left: "+1100",
        }, numRand, function() {
            $cloud.removeAttr("style");
            runIt();
        });
    }

    runIt();
});


</script>
</body>
</html>

CSS：

#background{
    background: url("background.png");
    width:1024px;
    height:768px;
}

#foreground{
    position: absolute;
    top:10px;
    left:10px;
    width:1024px;
    height:768px;
    z-index: 1000;
}

#fg{
    z-index: 10000;
}

#cloud1{
    position: absolute;
    left: 100px;
    top:10px;

}
#cloud2{
    position: absolute;
    left: 10px;
    top:150px;
    width:170px;
    height:99px;
}
#cloud3{
    position: absolute;
    left: -150px;
    top:250px;
}

#cloud4{
    position: absolute;
    left: 400px;
    top:100px;
    width:170px;
    height:99px;
}

非常感谢。

4

1 回答 1

4

如果您真的希望每朵云随机且单独地制作动画，那么您必须单独为每朵云制作动画，而不是将它们全部作为一组制作。实际上，您将在第一个动画完成后立即重新开始所有动画，并将它们全部保持在相同的时间表上。

改成这样：

$(document).ready(function() {

    function runIt(item$) {
        var numRand = Math.floor(Math.random()*2000)+9000;
        item$.animate({left: "+1100"}, numRand, function() {
            item$.css("left", "");   // set back to default
            runIt(item$);            // start again
        });
    }

    // start each cloud separately
    $('.cloud').each(function() {
        runIt($(this));
    });

});

这是一个工作版本，我调整了一些参数以使云离开右边缘，然后从左边缘进入：http: //jsfiddle.net/jfriend00/rZRud/

于 2012-11-14T02:15:13.763 回答