Question

这是我描述它的最佳方式。基本上，我有一个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次完整传递，停止，然后隐藏。有没有想法哦没有按钮怎么做？

Answer 1

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

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

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

在满足要求后停止功能

1 个答案: