0

上がるマーキーがあります。テキストのスクロールが完了すると (再び表示される前に)、マーキー領域は約 2 秒間空になり、その後再び表示されます。

それが空になるのを防ぎ、最後の行が上がる前に最初の行が来るようにする方法はありますか?

http://jsfiddle.net/WARVQ/2/

4

1 に答える 1

0

JavaScript を使用して実行できます。

<!DOCTYPE html>
<html>
<head>
    <title>Scroll demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
    <div id="container" style="position: absolute; width: 200px; height: 200px; background-color: grey">
    </div>
    <script type="text/javascript">
        var maxy = 200; // adjust
        var lineHeight = 17; // adjust
        var lines = new Array("line1", "line2", "line3");
        var textDivs = new Array(lines.length);
        for(var i=0;i<lines.length;i++) {
            var divx = document.createElement("div");
            var divxText = document.createTextNode(lines[i]);
            divx.style.top=String(maxy-(lines.length-i)*lineHeight)+"px";
            divx.style.position="absolute";
            divx.appendChild(divxText);
            textDivs[i] = divx;
            document.getElementById("container").appendChild(divx);
        }

        window.setInterval("scroll()", 50);
        function scroll() {
            for(var i=0;i<textDivs.length;i++) {
                var divx = textDivs[i];
                var y = parseInt(divx.style.top);
                y = y-1;
                if(y<0) y = maxy-lineHeight;
                divx.style.top =String(y)+"px";
            }
        }
    </script>
</body>
</html>
于 2012-07-02T11:40:37.910 に答える