Question

我尝试创建一个供个人使用的插件，它会随机将云放在我的网页中。

让我们看看我的想法是什么：

我用我所有的云创建了一个图像。

在我的CSS中，我创建了一个名为.cloud的通用类，它应用于所有云元素和四个类.cloud_1 .cloud_2 .cloud_3 .cloud_4，用于我希望放置在文档中的每个云元素。

以下是我使用的css类：

.cloud
{
    display: block;
    position: absolute;
    background: transparent url(../img/clouds.png) no-repeat 0px 0px;
}

.cloud_1
{
    width: 800px;
    height: 350px;
    background-position: 0px 0px;
    z-index: 1;
}

.cloud_2
{
    width: 800px;
    height: 469px;
    background-position: 0px -350px;
    z-index: 2;
}

.cloud_3
{
    width: 800px;
    height: 405px;
    background-position: 0px -819px;
    z-index: 3;
}

.cloud_4
{
    width: 630px;
    height: 314px;
    background-position: 0px -1225px;
    z-index: 4;
}

另一方面，我使用jQuery放置生成并将我的云随机地随机上下左右放入我的文档中。

我遇到的问题是，如果我将.cloud选择器的位置设置为绝对值，那么超出文档宽度的云就会激活水平滚动条。如果我将它设置为固定，当我向下滚动时，云将连接到相同的位置，等等。

为了让我的云没有水平滚动条而不是固定在同一位置，最佳解决方案是什么？

额外信息

我忘了告诉你，云会动画到右边！

生成的代码示例

<div class="cloud cloud_3"></div>

和jQuery将添加样式属性：

<div class="cloud cloud_3" style="top: 280px; left: 120px;"></div>

此外，jQuery将更改左侧css位置以便设置动画

Answer 1

将所有云放在<div> overflow: hidden中，并将其设置为文档的完整大小。将该div设置为z-index: -1，使其落后于其他内容。

Answer 2

将云放入包含overflow: hidden的div中。然后，当云的left位置大于包含div的宽度时，将其向左移动，使其再次向右滚动。

将元素随机放入文档背景中？

额外信息

生成的代码示例

2 个答案: