<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
div{
width:100px;
height:90px;
background-color:#FF0;
margin:50px 50px;
padding:30px;
filter:alpha(opacity:60);
opacity:0.6;
}
</style>>
</head>
<body>
<div></div>
<div></div>
<div></div>
<script type="text/javascript">
window.onload=function(){
var Div=document.getElementsByTagName("div");
for(var i=0;i<Div.length;i++){
Div[i].time=null;
Div[i].onmouseover=function(){
startMotion(this,300);
}
Div[i].onmouseout=function(){
startMotion(this,90);
}
}
}
function startMotion(obj,iTarget){
clearInterval(obj.time);
//var Div=document.getElementsByTagName("div");
obj.time=setInterval(function(){
var speed=(iTarget-obj.offsetWidth)/2;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(obj.offsetWidth==iTarget){
clearInterval(obj.time);
}
else{
obj.style.width=obj.offsetWidth+speed+"px";
}
},30)
}
</script>
</body>
</html>
知道哪里出错了，往后看教程就知道哪里出错了。
还有题目写错了，是老达不到目标值。
原因：obj.offsetWidth的值一直在加大，因为我加了padding，所以出错了。