0

这是我能描述它的最好方式。基本上，我有一个 jpg，我在屏幕上滚动加载。我应该能够停止图像，并在它在屏幕上进行 3 次下降后将其隐藏。我已经使用了几个小时了，但不知道如何在不使用 onClick 按钮的情况下使其工作。我需要它自己停下来。这是脚本：

    function moveit()
    {
    dom=document.getElementById("roman").style;


    dom.top= parseInt(dom.top)+tinc+"px"; 
    dom.left= startleft+"px";


    dom.visibility= "visible";
    startleft=startleft+linc;

    if (startleft<= 20)     
    {linc=linc*-1;      
    window.document.roman.src="roman.jpg"; }

    if (startleft>= window.screen.width-10) 
    {linc=linc*-1;
    window.document.roman.src="roman.jpg"; }


    to=setTimeout("moveit();", 100) ;
    }

身体看起来像这样：

    <body onload="moveit()">
    <div id="roman" style="position:absolute; top: 0px; left: 0px; visibility: hidden;">
    <img name="roman" src="roman.jpg"/>
    </div>

    <form>
    <div id="button" style="position:absolute; top: 315px; left: 10px;">
    <input type="button" value="stop" onClick="clearTimeout(to)">
    </div>
    </form>

我尝试了几种方法，但无法删除按钮方面。我希望图像从右到左进行 3 次完整传递，停止，然后隐藏。任何想法哦，如何在没有按钮的情况下做到这一点？

4

1 回答 1

0

您想使用计数器变量来跟踪图像水平反弹的次数。一旦该计数器达到某个数字，请不要重置超时：

var passes = 0;

var imageStyle = document.getElementById("roman").style;
imageStyle.visibility = "visible"; 

// Referring to the image with document.roman isn't recommended; give it an ID
// and use getElementById instead.
window.document.roman.src = "roman.jpg";

function moveit() {
    imageStyle.top = parseInt(dom.top) + tinc + "px"; 
    imageStyle.left = startleft + "px";

    startleft = startleft + linc;

    if (startleft <= 20 || startleft >= window.screen.width - 10) {
        linc = linc * -1;
        passes++;
    }

    if (passes < 3) {
        to = setTimeout(moveit, 100);
    }
}

请注意，我删除了一些冗余代码。您不必在每次计时器触发时设置可见性或图像源。刚开始就这样做。

于 2013-05-24T23:14:00.690 回答