1

ウェブサイトのホームページヘッダーにある大きな背景画像を移動するJavaScriptを使用して、簡単なアニメーションを作成しました。スクリプトはMozillaとIEで正常に機能しますが、どういうわけかChromeでは機能しません。以下を参照してください。

        var scrollSpeed = 70;       // Speed in milliseconds
        var step = 1;               // How many pixels to move per step
        var left = 0;
        var top = 0;            // The current pixel row
        var imageHeight = 718;      // Background image height
        var headerHeight = 376;     // How tall the header is.

        //The pixel row where to start a new loop
        var restartPosition = -(imageHeight - headerHeight);

        function scrollBg(){

            //Go to next pixel row.
            left -= step;
            top -= step;

            //If at the end of the image, then go to the top.
            if (top == restartPosition){
                top += step
            }

            //Set the CSS of the header.
            $('#slideshow').css("background-position",left+"px"+" "+top+"px");
        }
        //Calls the scrolling function repeatedly
        var init = setInterval("scrollBg()", scrollSpeed);

私はjquery1.4.3を使用しています。htmlは次のとおりです。

<div class="banner">
                        <div id="slideshow"></div>
                    </div>

誰かが私がここで間違っていることを指摘することができれば本当にありがたいです。

4

1 に答える 1

0

わかりました、私はそれを理解しました。スクリプト全体を$（document）.readyでラップするだけで、機能し始めました。最終的なスクリプトは次のとおりです。

$(document).ready(function() { 
        var scrollSpeed = 80;       // Speed in milliseconds
        var step = 1;               // How many pixels to move per step
        var left = 0;
        var top = 0;            // The current pixel row
        var imageHeight = 718;      // Background image height
        var headerHeight = 376;     // How tall the header is.

        //The pixel row where to start a new loop
        var restartPosition = -(imageHeight - headerHeight);

        function scrollBg(){

            //Go to next pixel row.
            left -= step;
            top -= step;

            //If at the end of the image, then go to the top.
            if (top == restartPosition){
                top += step
            }

            //Set the CSS of the header.
            $('#slideshow').css("background-position",left+"px"+" "+top+"px");
        }
        //Calls the scrolling function repeatedly
        setInterval(scrollBg, scrollSpeed);
    });
于 2012-04-23T05:27:06.163 に答える