完美运动框架可以解决多个物体的同时运动，一个物体的多个属性的运动，包括透明度及各种存在的属性，此框架将运动的所有内容封装成函数，只要传入相应的参数，几IU可以完成相应的运动任务。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>完美运动框架</title>
<style>
#div1{width:200px; height:200px; background:#F00;}
</style>
<script>
window.οnlοad=function()
{
var oDiv=document.getElementById('div1');
oDiv.οnmοuseοver=function()
{
onmove(this,{width:500,height:500});
}
oDiv.οnmοuseοut=function()
{
onmove(this,{width:200,height:200});
}
}
function getStyle(obj,name)
{
if(obj.currentStyle)
{
return obj.currentStyle[name];
}
else
{
return getComputedStyle(obj,false)[name];
}
}
function onmove(obj,json,fnEnd)//第一个参数为是谁的属性，第二个参数是属性和属性值的数组，最后一个是二次执行的函数
{
clearInterval(obj.timer);//关闭此对象中的定时器
obj.timer=setInterval(function ()
{
var stop=true;//假设所有的值都到了
for(var arr in json)//将参数中的属性和属性值迭代执行
{
var cur=0;
if(arr=='opacity')//如果参数是透明度，单一处理
{
cur=Math.round(parseFloat(getStyle(obj,arr))*100);
}
else//不是透明度的统一处理
{
cur=parseInt(getStyle(obj,arr));
}
var speed=(json[arr]-cur)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);//向上向下取整
if(cur!=json[arr])
{
stop=false;//如果还有元素没有到达，返回false
}
if(arr=='opacity')//透明度的调整
{
obj.style.filter='alpha(opacity:'+cur+speed+')';
obj.style.opacity=(cur+speed)/100;
}
else
{
obj.style[arr]=cur+speed+'px';
}
if(stop)
{
clearInterval(obj.timer);//如果一个对象上的多个属性都到达指定值时，关闭定时器
if(fnEnd)fnEnd();//如果fnEnd有存在则执行
}
}
},30);
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
7128
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
