多物体运动2（几种运动共用一套）
Posted 梁大爷
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了多物体运动2（几种运动共用一套）相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 150px;
height: 150px;
background: red;
float: left;
margin: 10px;
font-size: 8px;
}
</style>
<script>
var timer = null;
window.onload = function(){
//***********************************************************
var div1 = document.getElementById(‘div1‘);
div1.timer = null;
div1.onmouseover = function(){
startMove(div1,‘width‘,500);
}
div1.onmouseout = function(){
startMove(div1,‘width‘,150);
}
//***********************************************************
var div2 = document.getElementById(‘div2‘);
div2.timer = null;
div2.onmouseover = function(){
startMove(div2,‘height‘,500);
}
div2.onmouseout = function(){
startMove(div2,‘height‘,150);
}
//***********************************************************
var div3 = document.getElementById(‘div3‘);
div3.timer = null;
div3.onmouseover = function(){
startMove(div3,‘font-size‘,50);
}
div3.onmouseout = function(){
startMove(div3,‘font-size‘,10);
}
};
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
}
function startMove(obj,element,target){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var crrent = parseInt(getStyle(obj,element));
var speed = (target-crrent)/6;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(crrent == speed){
clearInterval(obj.timer);
}else{
obj.style[element] = crrent + speed +‘px‘;
}
},30);
}
</script>
</head>
<body>
<div id="div1">变宽</div>
<div id="div2">变高</div>
<div id="div3">字体变化</div>
</body>
</html>
以上是关于多物体运动2（几种运动共用一套）的主要内容，如果未能解决你的问题，请参考以下文章