1、多物體運動框架:(1)多物體之間共用一個定時器會卡?解決辦法:爲每一個對象分別加定時器自定義屬性
2、.多物體單個任意值運動框架
<style>
div{width: 100px;height: 50px;background: red;margin-top: 10px;
font-size: 14px;border:2px solid #000000;}
</style>
<script>
window.onload=function(){
var aDiv=document.getElementsByTagName('div');
var i=null;
for(i=0;i<aDiv.length;i++) {
if(i==0){
aDiv[i].timer=null;
aDiv[i].onmouseover = function () {
startMove(this,'width',300);
};
/*aDiv[i].onmouseout = function () {
startMove(this,width,100);
};}*/}else if(i==1){
aDiv[i].timer=null;
aDiv[i].onmouseover = function () {
startMove(this,'height',200);
};
} else{
aDiv[i].timer=null;
aDiv[i].onmouseover = function () {
startMove(this,'fontSize',30);
};
}
}
};
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
function startMove(obj,attr,iTarget){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var iCur=parseInt(getStyle(obj,attr));
var iSpeed=(iTarget-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
if(iTarget==iCur){
clearInterval(obj.timer);
}else{
obj.style[attr]=iCur+iSpeed+'px';
}
},30);
}
</script>
</head>
<body>
<div></div>
<div></div>
<div>豆腐腦</div>
</body>
</html>