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をoverlay-div内の独自のHTMLファイルにカプセル化しました。また、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リソースへのリンク。この概念がどのように機能するかに興味がある場合は、私のフィドルをチェックしてください：http: //jsfiddle.net/YuBpA/。元のチュートリアルはhttp://www.kudoswebsolutions.com/blog/jquery_scrolling_background/demos.htmlからのものです。必ず、そこを見てください。

于 2012-09-12T10:17:58.003 に答える