//获取对象属性
function getStyle(obj,attr){
if (obj.currentStyle) {
//兼容IE浏览器
return obj.surrentStyle[attr];
}else{
//谷歌或火狐
return getComputedStyle(obj,false)[attr];
}
}
var timer = null;
function startMove(obj,attr,end,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
//获取当前对象属性值
var icur = 0;
//如果是透明度，则将结果四舍五入
if (attr == 'opacity') {
icur = Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
icur = parseInt(getStyle(obj,attr));
}
//计算速度
var speed = (end-icur)/10;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(obj.icur == end){
clearInterval(obj.timer);
if (fn) {
fn();
}
}else{
if (attr == 'opacity') {
obj.style.filter = 'alpha:(opatity:'+icur+speed+')';//IE浏览器
obj.style.opacity = (icur+speed)/100;//谷歌或火狐
}else{
obj.style[attr] = icur+speed+'px';
}
}
},30)
}
<html>
<head>
<meta charset="utf-8">
<title>运动</title>
</head>
<script type="text/javascript" src="startMove.js"></script>
<style type="text/css">
*{
margin: 0;
padding:0;
}
#div1{
height: 200px;
width:200px;
position: relative;
background: red;
}
</style>
<script type="text/javascript">
window.onload = function(){
var onDiv = document.getElementById('div1');
onDiv.onmouseover = function(){
var that = this;
startMove(that,'width',400,function(){
startMove(that,'height',400)
});
}
onDiv.onmouseout = function(){
startMove(onDiv,'width',200);
}
}
</script>
<body>
<div id="div1">
</div>
</body>
</html>