move function -- edition 2 ---chain--
目前的运动框架不能让好几个值同时动,比如让一个div的宽和高同时增加,那么
{
startMove(oDiv,'height',300);
startMove(oDiv,'width',300);
}
这样是行不通的,因为第一个startMove刚开,其中的定时器打开,这时候第二个startMove一开,首先先把那个定时器给关掉了,所以只会执行第二个startMove的函数
function getStyle(obj,name)
{
if(obj.currentStyle)
{
return obj.currentStyle[name];
}
else
{
return getComputedStyle(obj,false)[name];
}
}
function startMove(obj,name,iTarget,fnEnd)
{
//关定时器
clearInterval(obj.timer);
//打开定时器
obj.timer = setInterval(function()
{
//设定变量,和 Itarget 决定了步长 speed
var cur= 0;
// 如果属性是opacity 怎么取数字
if (name == 'opacity')
{
cur = Math.round(parseFloat(getStyle(obj,name))*100);
}
else
{
cur= parseInt(getStyle(obj,name)); //这个时候传入的都是其他的样式如width等
}
// 设定变化的速度,渐变,所以还要取整
var speed = (iTarget-cur)/6;
speed = speed>0 ? Math.ceil(speed) :Math.floor(speed);
// 是否到达
if (cur == iTarget)
{
clearInterval(obj.timer);
if(fnEnd)fnEnd();
//注意在clearInterval后面需要添加 if(fnEnd)fnEnd();即,如果这个结束函数传进来了,就调用
}
else
{
if(name == 'opacity')
{
obj.style.filter='alpha(opacity:'+(cur+speed)+')';
obj.style.opacity=(cur+speed)/100;
//document.getElementById('txt1').value = obj.style.opacity;
}
else
{
obj.style[name] = cur+speed+'px';
}
}
}, 30);
}