1

我试图在我的背景图像上滚动一个透明图像。我遵循了位于此处的教程：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");
});

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

4

1 回答 1

1

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

于 2012-09-12T10:17:58.003 回答