                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /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

源自：JS动画效果 4-1

关注问题我要回答

1364

操作

收起

4 回答

doits
2018-11-06

<!DOCTYPE html>

<html>

<head>

<title>Title</title>

*{padding:0;margin:0;}

ul,li{list-style:none;}

ul li{

width:200px;

height:100px;

line-height:100px;

background:yellow;

margin-bottom:20px;

}

</style>

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>

</ul>

</body>

</html>

0 回复有任何疑惑可以回复我~

收起回答

莫892897612
2018-09-26

if(obj.offsetWidth == iTarget)

if判断句应该是2个==号

0 回复有任何疑惑可以回复我~

收起回答

vylss
2018-07-04

这样应该可以吧

0 回复有任何疑惑可以回复我~

收起回答

vylss
2018-06-25

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

0 回复有任何疑惑可以回复我~

收起回答

夜阑卧听风吹雨y 提问者

改了，还是运行不了，没用

2018-06-27 回复有任何疑惑可以回复我~

Sapce 回复夜阑卧听风吹雨y 提问者

1. 是getElementsByTagName(); Elements 不是 Element 2. 一个是 onmouseover(), 一个是 onmouseout; over 和 out 3. css 样式中 ul,li { } 中有误，请仔细检查下哦

2018-07-07 回复有任何疑惑可以回复我~