Question

<!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>

大家好，我想知道如果我每次向下滚动青蛙图像，我会如何循环青蛙，再次提前感谢！

Answer 1

如果您需要在用户实际转动鼠标滚轮时添加图像（即使不涉及实际滚动） - 您需要捕获“鼠标滚轮”事件。普遍的crossbrowser你可以这样：

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：”并将鼠标滚轮向下移动。

Answer 2

你可以尝试的是在向下滚动时（使用Javascript）使div修改其高度。然后在背景上应用图像并使用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>

使用鼠标滚动的未结束图像

2 个答案: