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

Question

到目前为止一切都很顺利。我想让这个 hor() 函数在 20 秒后反转。原始的 hor() 函数抓取屏幕外的图像并将其从页面左侧水平移动到页面中心。我想创建一个在 20 秒后执行相反操作的函数。 "after 20 seconds" 部分让我最伤心。如果您能告诉我新功能的外观或 'else' 对当前功能的补充，那就太好了。谢谢

<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 - 一段时间后水平移动图像

JS - moving an image horizontally after a period of time

javascript

image

settimeout