每次按照老师的，一样写都运行不出来，大神们帮帮忙

源自：4-1 JS多物体动画

每次按照老师的，一样写都运行不出来，大神们帮帮忙

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
 *{padding:0;margin:0;}
        ul,li{list-styleLnone;}
        ul li{
            width:200px;
 height:100px;
 line-height:100px;
 background:yellow;
 margin-bottom:20px;
 }
    </style>
    <script >
 window.onload=function()//网页刚打开的就时候执行函数
 {
           var aLi=document.getElementById("li");
 for(var i=0;i<aLi.length;i++)
           {
               aLi[i].onmouseover=function()//鼠标移上去的时候执行函数function
 {
                   startMove(this,400);//参数1 开始运动到400这个位置
 }
               aLi[i].onmouseover=function()
               {
                   startMove(this,200);//参数2 返回运动到200这个位置
 }
           }
        }
        var timer = null;
 function startMove(obj,iTarget)//前面有两个参数，这里也要写两个参数
 {
           clearInterval(timer);//关闭定时器
 timer = setInterval(function()
           {                           /*对象的可见宽度*/      //即距离
 var speed =(iTarget-obj.offsetWidth)/8;//速度=(目标值-东西的宽度)/时间
 speed = speed >0?Math.ceil(speed):Math.floor(speed);
 //速度=速度>0那么向上取整：否则向下取整；
 if(obj.offsetWidth == iTarget)
               {
                   clearInterval(timer);
 }
               else
 {
                   obj.style.width = obj.offsetWidth + speed + 'px';
 }
           },30)
       }
    </script>
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

</body>
</html>

提问者：夜阑卧听风吹雨y 2018-06-22 11:49

个回答

doits

2018-11-06 23:09:24

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{padding:0;margin:0;}
ul,li{list-style:none;}
ul li{
width:200px;
height:100px;
line-height:100px;
background:yellow;
margin-bottom:20px;
}
</style>
<script >
window.onload=function()//网页刚打开的就时候执行函数
{
var aLi=document.getElementsByTagName("li");
for(var i=0;i<aLi.length;i++)
{
aLi[i].timer=null;
aLi[i].onmouseover=function()//鼠标移上去的时候执行函数function
{
startMove(this,400);//参数1 开始运动到400这个位置
}
aLi[i].onmouseout=function()
{
startMove(this,200);//参数2 返回运动到200这个位置
}
}
}
// var timer = null;
function startMove(obj,iTarget)//前面有两个参数，这里也要写两个参数
{
clearInterval(obj.timer);//关闭定时器
obj.timer = setInterval(function()
{ /*对象的可见宽度*/ //即距离
var speed =(iTarget-obj.offsetWidth)/8;//速度=(目标值-东西的宽度)/时间
speed = speed >0?Math.ceil(speed):Math.floor(speed);
//速度=速度>0那么向上取整：否则向下取整；
if(obj.offsetWidth == iTarget)
{
clearInterval(obj.timer);
}
else
{
obj.style.width = obj.offsetWidth + speed + 'px';
}
},30);
}
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>

</body>
</html>

0
莫892897612

2018-09-26 15:30:59
```
if(obj.offsetWidth == iTarget)
```
if判断句应该是2个==号

0
vylss

2018-07-04 23:48:49

这样应该可以吧

0

vylss: 2018-06-25 22:27:48

 var aLi=document.getElementById("li"); 这里li是标签名啊，
 应该是var aLi=document.getElementsByTagName('li');注意一下这个aLi是一个数组。
 var timer = null;还有这里，老师演示的时候不是给每个方块都分配一个timer吗？aLi[i].timer=null;相应的startMove方法里面也要改一下。