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()タイマーのハンドルを返します。次に、このハンドルを呼び出しclearTimeout()てタイマーを停止できます。

これを格納するグローバル変数を作成します

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

グローバルブール値を使用してください。true で開始し、必要なポイントに到達したら false に設定します。doMove で、これが true であることを確認し、false の場合は単純に戻ります。

于 2012-05-01T20:47:45.210 に答える
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 に答える