为什么没有运动?

来源:5-1 JS链式动画

Amy1234567

2015-11-10 00:20

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type='text/css'>

#div1{

height:100px;

background: red;

width:200px;

color:black;

    font-size: 12px;

    margin-bottom: 20px;

    border: 1px solid black;


</style>

<script type="text/javascript">

window.onload=function(){

var oDiv = Document.getElementById('div1');

oDiv.onmouseover=function(){

        startMove(oDiv,'width',400,function(){

        startMove(oDiv,'height',200);

        });

}

}

function getStyle(obj,attr){

if(obj.currentStyle){

return obj.currentStyle[attr];//ie浏览器内核

}else{

return getComputedStyle(obj,false)[attr];//火狐浏览器内核

}

}

var timer=null;

function startMove(obj,attr,iTarget,fn){

clearInterval(obj.timer);//1.2+++

obj.timer=setInterval(function(){//1.2+++

var icur=0;

icur=parseInt(getStyle(obj,attr));

var speed=(iTarget-icur)/8;

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


if(icur==iTarget){

if(fn){

fn();

}

clearInterval(obj.timer);//1.2+++

}else{

obj.style[attr]=icur+speed+'px';

}

},30);

}



</script>

</head>

<body>

<ul>

<div id='div1'>哈哈</div>

</body>

</html>


写回答 关注

1回答

  • Y_du
    2015-11-10 10:36:47
    var oDiv = document.getElementById('div1')

    Document不能大写,这个是系统常量不能写错了。

    Amy123...

    可以了 谢谢~

    2015-11-14 00:25:22

    共 1 条回复 >

JS动画效果

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

113925 学习 · 1443 问题

查看课程

相似问题