Javascript 在背景图像上方滚动图像不移动_Javascript_Html_Css

Javascript 在背景图像上方滚动图像不移动

javascript html css

Javascript 在背景图像上方滚动图像不移动,javascript,html,css,Javascript,Html,Css,我正在尝试在我的背景图像上滚动一个透明图像。我遵循了此处的教程：我稍微修改了代码，因为我只需要覆盖来滚动，而不需要背景本身。目前，我可以在背景图像上看到我的覆盖图像，但它并没有移动假设我的背景图像是葡萄酒，覆盖图像是移动的气泡在原始教程中，背景正在移动，并与图像（气泡）重叠。我（试图）做的改变是让覆盖层而不是背景滚动。即使我已经更改了$（'#container'）.css（“背景位置”，“50%”+偏移量+“px”）的值到$（'#overlay'）.css（“背景位置”，“50%”+偏移量

我正在尝试在我的背景图像上滚动一个透明图像。我遵循了此处的教程：

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

假设我的背景图像是葡萄酒，覆盖图像是移动的气泡

在原始教程中，背景正在移动，并与图像（气泡）重叠。我（试图）做的改变是让覆盖层而不是背景滚动。即使我已经更改了

$（'#container'）.css（“背景位置”，“50%”+偏移量+“px”）的值

到

$（'#overlay'）.css（“背景位置”，“50%”+偏移量+“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>

和我的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");
});

$（函数（）{
//定义两个背景图像的高度。
//要滚动的图像
var背景高度=1000；
//为两个图像的起始位置创建随机偏移
offset=Math.round（Math.floor（Math.random（）*2001））；
函数scrollbackground（）{
//定义偏移时，确保覆盖所有基准。
偏移量=（偏移量<1）？偏移量+（背景高度-1）：偏移量-1；
//将背景放在所需的div上并垂直设置动画
$（'#overlay'）.css（“背景位置”，“50%”+偏移量+像素”）；
//启用函数在到达图像末尾时循环
setTimeout（函数（）{
滚动背景（）；
}, 100
);
}
//启动卷轴
滚动背景（）；
//使用前面定义的偏移量并将其应用于div。
$（'#overlay'）.css（“背景位置”，“50%”+偏移量+像素”）；
});

有人能看到我做错了什么吗？
我的JavaScript资源链接出现错误。如果人们对这个概念的工作原理感兴趣，请查看我的小提琴：。原始教程来自，请确保查看那里。
我的JavaScript资源链接有错误。如果人们对这个概念的工作原理感兴趣，请查看我的小提琴：。原始教程来自，请务必查看。
设置a或类似的设置，以便我们可以实时使用它。或者提供所有相关的html
代码，而不仅仅是上面提供的代码片段。没有多少人会为了设置一个工作台来测试代码而费心阅读整个教程！：）正在努力，好提示！另外，请解释您实际对教程中提供的代码做了哪些更改。这将有助于人们将注意力集中到值得关注的方面。我可以添加图像到小提琴上吗？我还编辑了我的问题，以包含有关我所做更改的更多信息。您可以将图像上载到类似（StackExchange就是这样使用的！）的内容，然后在您的fiddle代码中热链接它们。设置a或类似的内容，以便我们可以实时使用它。或者提供所有相关的html代码，而不仅仅是上面提供的代码片段。没有多少人会为了设置一个工作台来测试代码而费心阅读整个教程！：）正在努力，好提示！另外，请解释您实际对教程中提供的代码做了哪些更改。这将有助于人们将注意力集中到值得关注的方面。我可以添加图像到小提琴上吗？我还编辑了我的问题，以包含有关我所做更改的更多信息。您可以将图像上载到类似（StackExchange就是这样使用的！）的内容，然后在FIDLE代码中热链接它们。
$(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");
});