0

我有一个函数可以增加 div 层位置的 css 质量，并且需要它在它达到一定数量的百分比时停止，无论是向右还是向左（取决于层）。我尝试使用大于运算符执行 if 语句，但似乎不起作用。这是完整的代码：

<html>
<head>
<title>Stelucir</title>
<style>
body {
  background-color: white;
}
#bg-right {
  background-color: black;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 0;
  z-index: -1;
}
</style>
<script type="text/javascript">

var header = null; // object
var about = null; // object
var blog = null; // object
var forum = null; // object
var chat = null; // object
var home = null; // object

function doMove() {
  header.style.right = parseInt(header.style.right)+1+'%';
  about.style.left = parseInt(about.style.left)+1+'%';
  blog.style.right = parseInt(blog.style.right)+1+'%';
  forum.style.left = parseInt(forum.style.left)+1+'%';
  chat.style.right = parseInt(chat.style.right)+1+'%';
  home.style.left = parseInt(home.style.left)+1+'%';
  setTimeout(doMove,30); // call doMove in 20msec
}

function init() {
  header = document.getElementById('header');
  about = document.getElementById('about');
  blog = document.getElementById('blog');
  forum = document.getElementById('forum');
  chat = document.getElementById('chat');
  home = document.getElementById('home'); 
  doMove(); // start animating
}

window.onload = init;

</script>
</head>
<body>
<div id="bg-right"></div>
<div id="header" style = "position:absolute;right:25%;font-size:80px;">Stelucir</div>
<div id="about" style = "position:absolute;left:40%;font-  size:40px;top:90px;color:white;">About</div>
<div id="blog" style = "position:absolute;right:40%;font-size:40px;top:130px;">Blog</div>
<div id="forum" style = "position:absolute;left:40%;font-size:40px;top:170px;color:white;">Forum</div>
<div id="chat" style = "position:absolute;right:40%;font-size:40px;top:210px;">Chat</div>
<div id="home" style = "position:absolute;left:40%;font-size:40px;top:250px;color:white;">Home</div>
</body>
</html>
4

3 回答 3

0

我更建议使用间隔而不是多个 setTimeout 调用。setInterval 和 setTimeout 都返回一个引用，可以使用 clearInterval(ref) 或 clearTimeout(ref) 来阻止它们；

这是一个小小提琴，它使一个盒子向右移动并在它在那里时停止。

http://jsfiddle.net/JV35w/1/

var elem = document.getElementById('foo'),
    startX = 0,
    endX = 400,
    move = function() {
        elem.style.left = startX + 'px';
        startX += 10;
        if (endX === startX) {
            startX = 0;
            clearInterval(t);
        };
    },
    doMove = function() {
        t = setInterval(move);
    },
    t;

doMove();​

https://developer.mozilla.org/en/DOM/window.setTimeout

https://developer.mozilla.org/en/DOM/window.setInterval

于 2012-05-01T20:57:37.763 回答
0

使用全局布尔值。从 true 开始，当它达到你想要的任何点时，将其设置为 false。在 doMove 中检查是否为真，如果为假，则返回。

于 2012-05-01T20:47:45.210 回答
0

setTimeout()返回计时器的句柄。然后，您可以调用clearTimeout()此句柄来停止计时器。

创建一个全局变量来存储它

var timer = null;
...
function doMove() {
    ...
    timer = setTimeout(...);
}
//somewhere else
clearTimeout(timer);
于 2012-05-01T20:50:38.330 回答