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

Scrolling image on top of background image not moving

本文关键字：图像 移动 滚动 顶部 背景      更新时间：2023-09-26

我正在尝试在背景图像上滚动一个透明图像。我遵循了这里的教程：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文件.中保留了所有其他内容

此外，在教程中，overlaydiv被封装在容器div中。正如您所看到的，我现在已经将bodydiv封装在我自己的HTML文件中的overlaydiv中。此外，我已经将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");
});

有人看到我在这里做错了什么吗？

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

相关文章：