Question

到目前为止一切都很顺利。我想让这个hor（）函数在20秒后反转。原始的hor（）函数在屏幕外抓取图像并将其从左侧水平移动到页面的中心。我想在20秒后创建一个相反的功能。＆＃34;＆＃34; 20秒后＆＃34;部分给了我最大的悲伤。如果你可以告诉我一个新功能会是什么样子或者其他＆＃39;除了当前的功能，这将是伟大的。感谢。

<script language="JavaScript" type="text/JavaScript">

var x = -500;   
var y = 100;  


function hor(val) {

if (x <= 500){
x = x + val;    
document.getElementById("pos").style.left = x + "px";
setTimeout("hor(5)", 10);
}

}
</script>

<style type="text/css">
<!--
#pos {
position: absolute;
left: -500px;
top: 100px;
z-index: 0;
}

</style>


<body onLoad="setTimeout('hor(5)',5000)">
<div id="pos"> 
<a href="#"><img src="image.jpg"></a>
</div>

Answer 1

也许您可以尝试将脚本更改为：

// Define variables
var x = -500,
    y = 100,
    direction = 1;

// Function which moves "pos" element
function hor(val) {
  // Move by specified value multiplied by direction
  x += val * direction; 

  if(x > 500){
    x = 500;
    // Reverse direction
    direction = -1;
  } else if(x < -500){
    x = -500;
    // Reverse direction, once again
    direction = 1;
  }
  // Move element
  document.getElementById("pos").style.left = x + "px";

  // Continue loop
  setTimeout("hor("+val+")", 10);
}

此代码将继续将pos元素移动指定的值，直到x大于500，此时它将切换方向，然后一直持续到x到达-500，等等。

修改

此代码将在20秒内解决该问题（我原本认为500像素的事情计算为20秒，大声笑）。

// Define variables var x = -500, y = 100, direction = 1; firstCall = true; timeElapsed = 0; // Function which moves "pos" element function hor(val) { // Don't let the first call count! if(!firstCall)timeElapsed += 10; else firstCall = false; if(timeElapsed >= 2000){ // Reverse direction direction *= -1; timeElapsed = 0; } // Move by specified value multiplied by direction x += val * direction; // Move element document.getElementById("pos").style.left = x + "px"; // Continue loop setTimeout("hor("+val+")", 10); }

Answer 2

试试这个。这里img是水平移动的，之后它会恢复到原来的位置。

    <script>
        var x = -500;
        var y = 100;
        var op;
        function hor(val) {
            if (x <= 500 && x>=-500) {
                x = x + val;
                document.getElementById("pos").style.left = x + "px";
                setTimeout(function(){hor(val);},10);
            }
        }
        $(document).ready(function(){
            setTimeout(function(){hor(5);},1000);
            setInterval(function(){
                setTimeout(function(){hor(-5);},1000);
            },2000);
        });
    </script>

我只更改了测试时间，您可以将其更改回来。

JS - 在一段时间后水平移动图像

2 个答案: