为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/JavaScript

/JS动画效果

不会动，代码一样，就是不会动

<!DOCTYPE html>
<html>
<head>
    <title>huoqu</title>
</head>
<style type="text/css">
    body,ul,li{
        margin: 0;
        padding: 0;
    }
    ul,li{
        list-style: none;

    }
    ul li{
        width: 200px;
        height: 100px;
        background: blue;
        margin-bottom: 20px;
    }
</style>
<script type="text/javascript">
    window.onload=function(){
        var ai=document.getElementsByTagName('li');
        for(var i=0;i<ali.length;i++){
            ai[i].timer=null;
            ai[i].onmouseover=function(){
                starmove(this,400);
            }
            ai[i].onmouseout=function{
                starmove(this,200);
            }
        }
    }
function starmove(obj,target){
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
        var speed=(target-obj.offsetWidth)/8;
        speed=speed>0?Math.ceil(speed):Math.floor(speed);
        if(obj.offsetWidth==target){
            clearInterval(obj.timer);
        }
        else{
            obj.style.width=obj.offsetWidth+speed+'px';
        }
    },30);
}
</script>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>

你说我是慕粉

2016-11-29

源自：JS动画效果  4-1

关注问题 我要回答
1097
操作
收起

正在回答

6 回答

Hei_a
2016-12-07

ai[i].onmouseout=function(){}少了一个括号  好友出现问题 在网页上右击检查元素  可以很快发现问题 望采纳

0 回复 有任何疑惑可以回复我~
收起回答
慕粉3126759
2016-12-04

http://img1.sycdn.imooc.com//5842ef7c0001080d04450294.jpg

变量写错了

0 回复 有任何疑惑可以回复我~
收起回答
#1

你说我是慕粉 提问者

已经好了Y(^o^)Y，不知道为什么，变量改过来还是错了，再打一遍就好了Y(^o^)Y，谢谢，晚安
2016-12-04 回复 有任何疑惑可以回复我~
慕仔2791819
2016-12-02

我也遇到这样的问题了！代码一样，就是不动。

<!DOCTYPE html>

<html>

<head>

<title></title>

<style type="text/css">

*{margin: 0;padding: 0;}

ul,li{list-style-type: none;}

ul li{

width: 200px;

height:100px;

background: yellow;

margin-bottom: 20px;

}

</style>

<script type="text/javascript">

window.onload=function(){

var aLi=document.getElementsByTagName('li');

for(var i=0;i<aLi.length;i++;){

aLi[i].onmouseover=function(){

startMove(this,400);

}

aLi[i].onmouseout=function(){

startMove(this,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);

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>


0 回复 有任何疑惑可以回复我~
收起回答
#1

慕粉3126759

setInterval（...,30）后面的冒号没写
2016-12-04 回复 有任何疑惑可以回复我~
#2

慕仔2791819 回复 慕粉3126759

谢谢老板！
2016-12-10 回复 有任何疑惑可以回复我~
qq_HUCOath
2016-11-29

我放你的代码进去编辑器看了，onmouseout是对的,但是他没有高亮显示 你重新打一遍就好,不需要纠结

附上完整代码

<!DOCTYPE html>

<html>

<head>

    <title>huoqu</title>

</head>

<style type="text/css">

    body,ul,li{

        margin: 0;

        padding: 0;

    }

    ul,li{

        list-style: none;


    }

    ul li{

        width: 200px;

        height: 100px;

        background: blue;

        margin-bottom: 20px;

    }

</style>

<script type="text/javascript">

    window.onload=function(){

        var ai=document.getElementsByTagName('li');

        for(var i=0;i<ai.length;i++){

            ai[i].timer=null;

            ai[i].onmouseover=function(){

                starmove(this,400);

                }

            ai[i].onmouseout=function(){

                starmove(this,200);

                }

            }

        

    }

function starmove(obj,target){

    clearInterval(obj.timer);

    obj.timer=setInterval(function(){

        var speed=(target-obj.offsetWidth)/8;

        speed=speed>0?Math.ceil(speed):Math.floor(speed);

        if(obj.offsetWidth==target){

            clearInterval(obj.timer);

        }

        else{

            obj.style.width=obj.offsetWidth+speed+'px';

        }

    },30);

}

</script>

<body>

<ul>

    <li></li>

    <li></li>

    <li></li>

</ul>

</body>

</html>

望采纳,晚安

0 回复 有任何疑惑可以回复我~
收起回答
#1

你说我是慕粉 提问者

谢谢，晚安
2016-11-30 回复 有任何疑惑可以回复我~
#2

你说我是慕粉 提问者

今天试了，还是不行。。。
2016-11-30 回复 有任何疑惑可以回复我~
#3

你说我是慕粉 提问者

今天试了，还是不行。。。
2016-11-30 回复 有任何疑惑可以回复我~
qq_HUCOath
2016-11-29

那个for循环那个ali写错了,单词

 var ai=document.getElementsByTagName('li');
        for(var i=0;i<ai.length;i++){
            ai[i].timer=null;
            ai[i].onmouseover=function(){
                starmove(this,400);
            }
            ai[i].onmouseout=function{
                starmove(this,200);
            }
        }

0 回复 有任何疑惑可以回复我~
收起回答
#1

你说我是慕粉 提问者

改了，没用
2016-11-29 回复 有任何疑惑可以回复我~
笑声怜人
2016-11-29

三个li会不会获取的时候出了问题，你给它们设个id试试

0 回复 有任何疑惑可以回复我~
收起回答
#1

你说我是慕粉 提问者

没用啊，那个getelmentsbytagname不是获取标签名吗？跟这有关系吗？
2016-11-29 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
JS动画效果
  • 参与学习       113925    人
  • 解答问题       1443    个

通过本课程JS动画的学习，从简单动画开始，逐步深入各种动画框架封装

进入课程

本课相似问答

1 回答代码如下，其中不会遇到等于目标值，导致动画不会停止。

2 回答这样写，为什么会一直运动？

2 回答为什么动画会一直转动

1 回答改成下方这样，为什么不用鼠标滑过自己就会动？

2 回答我的代码动不了
搜索更多本课相关问答

不会动，代码一样，就是不会动

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信