背景图像顶部的滚动图像不移动答案

【问题标题】：Scrolling image on top of background image not moving背景图像顶部的滚动图像不移动
【发布时间】：2012-09-12 09:24:46
【问题描述】：

我正在尝试让透明图像在我的背景图像上滚动。我遵循了位于此处的教程：http://www.kudoswebsolutions.com/blog/jquery_scrolling_background/demos.html

我稍微修改了代码，因为我只需要滚动覆盖而不是背景本身。目前，我可以在背景图像上看到我的叠加图像，但它没有移动。

把我的背景图片想象成酒，而叠加的图片是移动的气泡。

在原始教程中，背景是移动的，并且与图像（气泡）重叠。我（尝试）所做的更改是让覆盖滚动而不是背景。即使我将值从$('#container').css("background-position", "50% " + offset + "px"); 更改为$('#overlay').css("background-position", "50% " + offset + "px");，图像也不会移动。我在 .js 文件中保留了其他所有内容。

此外，在本教程中，overlay-div 被封装在 container-div 中。如您所见，我现在已将 body-div 封装在自己的 HTML 文件中的 overlay-div 中。另外，我已将 CSS 文件中覆盖的位置更改为 relative。

我的代码：

HTML 页面：

<!DOCTYPE html>
<html>
<head>
    <title>title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="resources/assets/styles.css" type="text/css"  />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="js/custom.js"></script>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
</head>
<body>
<div id="overlay">
<div class="body">
<div class="header">
...
</div>
</body>
</html>

我的 CSS 文件：

body {
        background-image: url("../images/background.jpg");
        width: 1104px;
        height: 976px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        font-family: Verdana;
}

#overlay {
        position:relative;
        width:899px;
        height:858px;
        background:url("../images/overlay.png");
}

还有我的 JS 文件：

$(function() {
    // Define the height of your two background images.
           //The image to scroll
       var backgroundheight = 1000;

    // Create a random offset for both images' starting positions
        offset = Math.round(Math.floor(Math.random()* 2001));

    function scrollbackground() {
                //Ensure all bases are covered when defining the offset.
        offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
        // Put the background onto the required div and animate vertically
        $('#overlay').css("background-position", "50% " + offset + "px");
        // Enable the function to loop when it reaches the end of the image
        setTimeout(function() {
            scrollbackground();
            }, 100
        );
    }

    // Initiate the scroll
    scrollbackground();

    // Use the offset defined earlier and apply it to the div.
        $('#overlay').css("background-position", "50% " + offset + "px");
});

谁能看到我在这里做错了什么？

【问题讨论】：

设置fiddle 或类似的东西，这样我们就可以实时使用它了。或者提供所有相关的html 代码，而不仅仅是您在上面提供的 sn-p。没有多少人会费心阅读整个教程，只是为了设置一个工作台来测试你的代码！ :)
正在努力，好提示！
还请解释您实际上对教程中提供的代码所做的更改。这将帮助人们将注意力集中在值得关注的地方。
我可以在小提琴中添加图片吗？我还编辑了我的问题，以包含有关我的更改的更多信息。
您可以将图像上传到imgur.com 之类的位置（StackExchange 就是这样使用的！），然后在您的小提琴代码中进行热链接。

标签： javascript html css

【解决方案1】：

我的 JavaScript 资源链接有问题。如果人们对这个概念的工作原理感兴趣，请查看我的 Fiddle：http://jsfiddle.net/YuBpA/。原创教程来自http://www.kudoswebsolutions.com/blog/jquery_scrolling_background/demos.html，一定要看。

【讨论】：