大家来看看这个移动的效果吧

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>妙味课堂(www.miaov.com)——运动特效</title>
<style>
#div1 {background: url(http://www.miaov.com/miaov_demo/animation/miaov.jpg); position:absolute; left:50px; top:50px; width:200px; height:200px;}
</style>
</head>

<body>
<div id="num"></div>
<div id="div1"></div>
<input id="btn_start_move" type="button" value="开始运动" />
<script type="text/javascript">
            var t; function moveElem(){
                var elem = document.getElementById("div1");
                var iSpeed= 5;
                if(elem.offsetLeft > 400){
                    clearTimeout(t);
                }
                else{
                    elem.style.left = elem.offsetLeft + iSpeed + "px";
                }
                t = setTimeout("moveElem()",30);            }
            function clickMove(){
                var clicks = document.getElementById("btn_start_move");
                clicks.onclick = function(){
                     moveElem()
                }
            }
            clickMove()
</script>
</body>
</html>

第一个问题看不懂你的意思来说第二个问题
left400的时候已经开始在执行减了。但是你没有看到它往回飘的动作是因为：
当left超过400的时候，这个时候的iSpeed因为++已经叠加到28(假设数据)了
if判断开始走--（减减）路线
28--得出多少？27！elem.style.left = elem.offsetLeft + 27 + "px";()
27--得出多少？26！elem.style.left = elem.offsetLeft + 26 + "px";()
以此类推，当iSpeed被减到负的时候，就开始往回飘了，不知道我这么说，你能看懂吗。
elem.style.left = elem.offsetLeft + 27 + "px";()//这句在代码执行时，结果如下elem.style.left = elem.offsetLeft + 1 + "px";()
elem.style.left = elem.offsetLeft + 2 + "px";()
elem.style.left = elem.offsetLeft + 3 + "px";()
elem.style.left = elem.offsetLeft + 4 + "px";()
………………………………………………
elem.style.left = elem.offsetLeft + 26 + "px";()
elem.style.left = elem.offsetLeft + 27 + "px";()
elem.style.left = elem.offsetLeft + 28 + "px";()//left超过400之后，也就是iSpeed--;了
elem.style.left = elem.offsetLeft + 27 + "px";()
elem.style.left = elem.offsetLeft + 26 + "px";()
………………………………………………
elem.style.left = elem.offsetLeft + 4 + "px";()
elem.style.left = elem.offsetLeft + 3 + "px";()
elem.style.left = elem.offsetLeft + 2 + "px";()
elem.style.left = elem.offsetLeft + 1 + "px";()
………………………………………………//下面是往回飘了
elem.style.left = elem.offsetLeft + 0 + "px";()
elem.style.left = elem.offsetLeft + -1 + "px";()
elem.style.left = elem.offsetLeft + -2 + "px";()

我的理解是
elem.style.left = 0 + 1 + "px";()
elem.style.left = 1 + 2 + "px";()
elem.style.left = 3 + 3 + "px";()
elem.style.left = 6 + 4 + "px";()
elem.style.left = 10 + 5 + "px";()
以次类推。。

回复4楼
elem.style.left = 0 + 1 + "px";()
elem.style.left = 1 + 2 + "px";()
elem.style.left = 3 + 3 + "px";()
elem.style.left = 6 + 4 + "px";()
elem.style.left = 10 + 5 + "px";()
//当left>400的时候，iSpped开始--
//但是已经达到28了，就算--也还是个正数，这个时候elem.offsetLeft + iSpped还是向右飘的效果
//代码如下
elem.style.left = 401 + 27 + "px";()
elem.style.left = 428 + 26 + "px";()
elem.style.left = 454 + 25 + "px";()
…………………………………………
//elem.offsetLeft到800+的时候，iSpped已经减减到负数了，
//elem.offsetLeft再加上它效果就是往回飘了。
//往回飘，代码是这样
elem.style.left = 401 + (-1) + "px";()
elem.style.left = 400 + (-2) + "px";()
elem.style.left = 398 + (-3) + "px";()//或者你把iSpped全部弹出来就知道了。

看这个你就懂了<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>妙味课堂(www.miaov.com)——运动特效</title>
<style>
#div1 {background: url(http://www.miaov.com/miaov_demo/animation/miaov.jpg); position:absolute; left:0px; top:50px; width:200px; height:200px;}
</style>
</head>

<body>
<div id="num"></div>
<div id="div1"></div>
<input id="btn_start_move" type="button" value="开始运动" onclick="moveElem()" />
<input id="btn_start_move" type="button" value="停止" onclick="Stop()" />
<br />
<div id="code"></div>
<script type="text/javascript">
            var iSpeed=0;
var t;
var code = document.getElementById("code");

            function moveElem(){
                var elem = document.getElementById("div1");
                if(elem.offsetLeft < 400){
                    iSpeed++;
                }
                else{
                    iSpeed--;
                }
                elem.style.left = elem.offsetLeft + iSpeed + "px";
code.innerHTML += "elem.style.left = "+elem.offsetLeft+" + "+iSpeed+" + px<br/>";
                t = setTimeout("moveElem()",30);
            }

function Stop(){
clearTimeout(t);
}
</script>
</body>
</html>

调试易

大家来看看这个移动的效果吧

解决方案 »