<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
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>