<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>完美运动框架</title>
<style>
body,ul,li{
margin:0;
padding:0;
}
ul,li{
list-style:none;
}
ul li{
200px;
height:100px;
background:yellow;
margin-bottom:20px;
border:4px solid #000;
filter:alpha(opacity:30);
opacity:0.3;
}
</style>
<script src="move.js"></script>
<script>
window.onload = function(){
var oLi = document.getElementById('li1');
oLi.onmouseover = function(){
startMove(oLi,{400,height:200,opacity:100});
}
oLi.onmouseout = function(){
startMove(oLi,{200,height:100,opacity:30});
}
}
</script>
</head>
<body>
<ul>
<li id = "li1">我是什么颜色</li>
</ul>
</body>
</html>move.js
function getStyle(obj, attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[attr];
}
else
{
return getComputedStyle(obj, false)[attr];
}
}
function startMove(obj, json, fn)
{
clearInterval(obj.timer);
obj.timer=setInterval(function (){
flag=true;//定义标杆，假设所有运动都到达目标值
for(var attr in json)
{
//1.取当前的值
var iCur=0;
if(attr=='opacity')
{
iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
}
else
{
iCur=parseInt(getStyle(obj, attr));
}
//2.算速度
var iSpeed=(json[attr]-iCur)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
//3.检测停止
if(iCur!=json[attr])
{
flag=false;
}
if(attr=='opacity')
{
obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
obj.style.opacity=(iCur+iSpeed)/100;
}
else
{
obj.style[attr]=iCur+iSpeed+'px';
}
}
if(flag)
{
clearInterval(obj.timer);
if(fn)
{
fn();
}
}
}, 30)
}