为什么我的代码没反应 是吧之前的offset改成getStyle之后就没动静了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多物体运动1</title>
<style type="text/css">
*{margin: 0; padding: 0;}
ul,li{list-style: none;}
li{
font-size: 20px;
font-style:italic;
width: 200px;
height: 100px;
background: lawngreen;
margin-top: 30px;
position: relative;
cursor: pointer;
border: 2px solid red;
}
span{
display: block;
position: absolute;
right: 3px;
}
#span{
display: block;
float: right;
font-size: 500px;
top: 0px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var li=document.getElementsByTagName("li");
for(var i=0;i<li.length;i++){
li[i].timer=null;
li[i].onmouseover=function(){
startmove(this,400);
}
li[i].onmouseout=function(){
startmove(this,200);
}
}
function getStyle(obj,attr){
if(obj,currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}
function startmove(obj,Itarget){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var cur=parseInt(getStyle(obj,'width'));
var speed=(Itarget-cur)/20;
speed=(speed>0)?Math.ceil(speed):Math.floor(speed);
if(Itarget==cur){
clearInterval(obj.timer);
}else{
obj.style.width=cur+speed+"px";}
},30);
}
}
</script>
</head>
<body>
<ul>
<li><span>我</span></li>
<li><span>爱</span></li>
<li><span>你</span></li>
<li><span>呀</span></li>
</ul>
<span id="span">?</span>
</body>
</html>
