/**
* 运动函数简单封装
* @param obj 要操作的对象
* @param json 存放要改变的属性和目标值
* @param fn 回调函数,在前面的运动效果执行完之后,才回执行的函数
*/
function motion(obj, json,fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
// 当开关变量结果为true时,表示所有动作执行完毕,可以停止定时器,调用回调函数了
var onOff = true;
for ( var attr in json ){
var current = null;
// 获取当前值
if (attr = "opacity") {
current = parseInt(getStyle(obj, attr)) * 100;
} else {
current = parseInt(getStyle(obj, attr));
};
// 计算速度
var speed = ( json[attr] - current ) / 7;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
// 如果目标值和当前值不相等 继续for循环
if (json[attr] != current) {
flag = false;
};
if (attr = "opacity") {
obj.style.opacity = ( current + speed ) / 100;
obj.style.filter = "alpha(opacity = " + ( current + speed ) + ")";
} else if (attr == "zIndex"){
obj.style.zIndex = json[attr];
}else {
obj.style[attr] = current + speed + "px";
};
};
// 判断开关变量的停止条件
if( onOff ){
clearInterval(obj.timer);
if (fn) {
fn();
};
};
}, 50);};
/**
* 获取非行内CSS样式
* @param obj 要获取的对象
* @param attr 要获取的属性
* @returns {Number}
*/
function getStyle(obj, attr) {
if (window.getComputedStyle) {
return window.getComputedStyle(obj.false)[attr];
} else {
return obj.currentStyle[attr];
};
};
网友评论