Question

我正在尝试在背景图像上滚动透明图像。我按照这里的教程：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");
});

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

Answer 1

我的JavaScript资源链接错误。如果人们对这个概念的运作方式感兴趣，请查看我的小提琴：http://jsfiddle.net/YuBpA/。原始教程来自http://www.kudoswebsolutions.com/blog/jquery_scrolling_background/demos.html，请务必查看。

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

1 个答案: