介绍了那么多运动，這次一套代码实现所有运动
1.html代码和css代码，只是定义一个div
<style>
div{
width:200px;
height:200px;
margin:20px;
float:left;
background:yellow;
border:10px solid black;
filter:alpha(opacity:30);
opacity:0.3;
}
</style>
<body>
<div id="div1"> </div> </body>
2.js代码部分
<script>
window.onload=function()
{
var div=document.getElementById('div1');
div.onmouseover=function()
{
startMove(this,'height',1000);
}
div.onmouseout=function()
{
startMove(this,'height',50);
}
};
function getStyle(obj,name) //兼容性问题，修改非行间的css
{
if (obj.currentStyle)//chrome和firefox
{
return obj.currentStyle[name];
}
else//ie浏览器
{
return getComputedStyle(obj,false)[name];
}
}
function startMove(obj,attr,iTarget)
{
clearInterval(obj.timer);
obj.timer=setInterval(function()
{
var cur=0;
if (attr=="opacity") //判断传入的参数是不是透明度
{
cur=parseFloat(getStyle(obj,attr))*100; //强制转换为浮点数
}
else //如果不是透明度，执行這句
{
cur=parseInt(getStyle(obj, attr)); //返回传入要修改的属性的值
}
var speed=(iTarget-cur)/100 ; //设置速度
speed=speed>0?Math.ceil(speed):Math.floor(speed); //取上下限 if(cur==iTarget) //当等于要实现的值时停止
{
clearInterval(obj.timer);
}
else
{
if (attr=='opacity') //如果是透明度，兼容性。写两句
{
obj.style.filter='alpha(opcity:'+(cur+speed)+')'; //chrome和firefox
obj.style.opacity=(cur+speed)+'px'; //ie
}
else //要修改的是其他，直接修改他的值
{
obj.style[attr]=cur+speed+'px';
}
}
},
30)
}
</script>