问答详情
源自:4-1 JS多物体动画

为什么在li的例子里面加aLi[i].timer=null;就没事,而在div 的例子里加了相似的就不行????

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>


<style type="text/css">

body{

margin:0;

padding:0;

}

ul,li{

list-style:none;

}

ul li{

width:200px;

height:100px;

background:yellow;

margin-bottom:20px;

}

</style>


<script type="text/javascript">


//注意这种情况和4-1-1中的区别。


window.onload=function(){

var aLi=document.getElementsByTagName("li");//首先要得到要发生变化的元素。

//因为是让每一个li都运动,所以要遍历每一个li

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

aLi[i].timer=null;

aLi[i].onmouseover=function(){

startMove(this,400);//this代表让当前的li执行startMove这个函数

}

aLi[i].onmouseout=function(){

startMove(this,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);//缓冲运动,一定要给速度取整。

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>


提问者:qq_枫_ 2016-12-10 15:49

个回答

  • QuincyHan
    2016-12-10 22:13:38

    把你写的关于div的代码贴出来看看