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);

}

これは、ユーザーがマウスを下にスクロールしたかどうか (デルタ < 0) を検出し、そうである場合は、新しいカエルの画像を作成して DIV に追加します。

デモは次のとおりです: http://jsfiddle.net/Z8AxG/2/「Froggies:」という単語が表示されたウィンドウにマウスを置き、マウス ホイールを下げます。

于 2013-10-07T14:10:44.970 に答える