<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多目标缓冲运动</title>
<style>
*{margin:0;padding:0;}
#div1{height: 200px;width:200px;background:yellow;margin-right:20px;float:left;}
#div2{height: 200px;width:200px;background:yellow;margin-right:20px;float:left;}
#div3{height: 200px;width:200px;background:red;margin-right:20px;float:left;filter:alpha(opacity=30);opacity:.3}
</style>
<script>
window.onload=function(){
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
oDiv1.onmouseover=function(){
startMove(this,'width',400);
}
oDiv1.onmouseout=function(){
startMove(this,'width',200);
}
oDiv2.onmouseover=function(){
startMove(this,'height',400);
}
oDiv2.onmouseout=function(){
startMove(this,'height',200);
}
oDiv3.onmouseover=function(){
startMove(this,'opacity',100);
}
oDiv3.onmouseout=function(){
startMove(this,'opacity',30);
}
}
function startMove(obj,attr,iTarget){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
if(attr==='opacity'){
var oProperty=parseFloat(getStyle(obj,attr))*100;
}else{
var oProperty=parseInt(getStyle(obj,attr));
}
var speed = (iTarget-oProperty)/12;//缓冲运动，目标越大距离越大，成正比
speed=speed>0?Math.ceil(speed):Math.floor(speed); //取整
if(iTarget==oProperty){
clearInterval(obj.timer);
}else{
if(attr==='opacity'){
obj.style.filter='alpha(opacity='+(oProperty+speed)+')';
obj.style.opacity=(oProperty+speed)/100;
}else{
obj.style[attr]=oProperty+speed+'px';
}
}
},30)
}
//获取样式
function getStyle(obj,name){
return obj.currentStyle?obj.currentStyle[name]:getComputedStyle(obj,false)[name];
}
</script></head>
<body>
<div id="div1"></div>
<div id='div2'></div>
<div id='div3'></div></body>
</html>
代码如上，宽高什么的好像没问题，透明度ie9以上也没问题，如何兼容到ie9一下的ie版本。。。
在低版本IE可以用filter:alpha(opacity=50)调整透明度，50就是透明度50%。