0 
<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Frog</title>
    <script type="text/javascript">
        window.onscroll = infinity;
        function infinity () {
            document.write("<img src='frog.gif'>" + "<br/>");
        }
        while(window.onscroll){
            infinity();
        }
    </script>
</head>
<body>
    <img src='earth.png'> 
    <br/>
    <img src='tiger.jpg'> 
    <br/>
</body>
</html>

大家好，我想知道当我每次向下滚动时青蛙图像再次出现时，我将如何循环青蛙提前谢谢！

4

2 回答 2

3

如果您需要在用户实际转动鼠标滚轮时添加图像（即使不涉及实际滚动） - 您需要捕获“鼠标滚轮”事件。通用跨浏览器，您可以像这样：

if (document.addEventListener) {
    document.addEventListener("mousewheel", MouseWheelHandler, false);
    document.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
}
else {
    document.attachEvent("onmousewheel", MouseWheelHandler);
}

如果您创建一个占位符来保存您未来的图像：

<div id="fdiv">Froggies:</div>

您可以像这样在鼠标滚轮上添加图像：

function MouseWheelHandler(e) {

    var e = window.event || e;
    var delta = e.wheelDelta

    if (delta < 0)

    var img = document.createElement("img");
    img.src = "frog.gif";
    document.getElementById("fdiv").appendChild(img);

}

它的作用是检测用户是否向下滚动鼠标（delta < 0），如果是，则创建一个新的青蛙图像并将其添加到 DIV。

这是演示： http: //jsfiddle.net/Z8AxG/2/将鼠标放在带有“Froggies：”字样的窗口上，然后向下转动鼠标滚轮。

于 2013-10-07T14:10:44.970 回答
1

您可以尝试在向下滚动时让 div 修改其高度（使用 Javascript）。然后将图像应用到背景上并使用 CSS 重复：

div#infinity {
    background-image: url('frog.gif');
    background-repeat: repeat-y;
}

换句话说，当您向下滚动时，此脚本将添加图像：

<!DOCTYPE html>
<html>
    <head>
        <title>TEST: Infinity Scroll</title>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript">

            var lastScrollTop = 0;
            $(window).scroll(function(event) {
                var st = $(this).scrollTop();
                if (st > lastScrollTop) {
                    $('div#infinity').append(
                        $('<div>').attr("id", "infinityimage")
                    );
                }
                else {
                    // upscroll code
                }
                lastScrollTop = st;
            });

        </script>
        <style type="text/css">

            html, body {
                height: 101%;
            }

            div#infinityimage {
                height: 190px;
                background-image: url('https://www.google.nl/images/srpr/logo6w.png');
                background-repeat: repeat-y;
            }

        </style>
    </head>
    <body>

        <div id="infinity">

        </div>

    </body>
</html>
于 2013-10-07T13:55:15.300 回答