Question

我正在使用这种云效果http://solidgiant.com/2011/02/awesome-cloud-effect/，但我想改变云运动的方向。我希望他们从右向左移动，任何人都可以帮助我这个

我完成了Nishchay Sharma所说的方向改变，但仍然有一个问题，云层不会在循环中运行......当它们到达左侧时它们只是被卡住了:(

Answer 1

在clouds.css中，更改：

#cloud
{
    ...
    left: 5%;
    ...
}

到

#cloud
{
    ...
    left: 80%;
    ...
}

并在clouds.js中更改

$("#cloud")
        .animate(
            {
                left: $("#sky").width()
            },
            cloudMoved ? 180000 : 150000,
            "linear",
            function()
            {
                $(this)
                    .css("left", parseInt($(this).css("width")))
                cloudMoved = true;
                cloudMove();
            }
        )

到

$("#cloud")
        .animate(
            {
                left: 0
            },
            cloudMoved ? 180000 : 150000,
            "linear",
            function()
            {
                $(this)
                    .css("left", parseInt($(this).css("width")))
                cloudMoved = true;
                cloudMove();
            }
        )

对$('#cloud2')和$('#cloud3')执行相同的操作。（将$(..).animate('left')更改为0。）

进一步添加 在完成动画后让云回到另一个角落。对于每个cloudMove()，cloud2Move()和cloud3Move()：

更改

.animate(
            {
                left: 0
            },
            cloud3Moved ? 400000 : 150000,
            "linear",
            function()
            {
                $(this)
                    .css("left", -parseInt($(this).css("width")))
                cloud3Moved = true;
                cloud3Move();
            }
        )

到

.animate(
            {
                left: "-"+$("#cloud").width()+"px"
            },
            cloud3Moved ? 400000 : 150000,
            "linear",
            function()
            {
                $(this)
                    .css("left", parseInt($(window).width()+'px'))
                cloud3Moved = true;
                cloud3Move();
            }
        )

注意：不要忘记根据云ID更改left:选项。

Answer 2

在您的cloud.js中，将cloudMove（）函数更改为 -

function cloudMove()
{
    if (!cloudMoved)
    {
        $("#cloud")
            .css("left", $("#cloud").offset().left)
    }

    $("#cloud")
        .animate(
            {
                left: -($("#cloud").width())
            },
            cloudMoved ? 180000 : 10000,
            "linear",
            function()
            {
                $(this)
                    .css("left", $("#sky").width() - $("#cloud").width())
                cloudMoved = true;
                cloudMove();
            }
        )
}

根据自己的喜好更改计时器！

另外两个云只是副本 - 你可以对它们做同样的事情

Answer 3

更改（删除“ - ”符号）

.css("left", -parseInt($(this).css("width")))

到

.css("left", parseInt($(this).css("width")))

改变动画的方向

3 个答案: