function buffer(obj, target) {
// 1. 清除定时器
clearInterval(obj.timer);
// 2. 设置定时器
obj.timer = setInterval(function () {
// 2.1 求出步长
var speed = (target - obj.offsetLeft) / 20;
console.log(speed);
speed = speed > 0 ? Math.ceil(speed): Math.floor(speed);
console.log(speed);
// 2.2 设置动画
obj.style.left = obj.offsetLeft + speed + 'px';
obj.innerHTML = obj.offsetLeft;
// 2.3 清除定时器
if(obj.offsetLeft == target){
clearInterval(obj.timer);
}
}, 20);
}
/*
* 缓动动画
* obj: 要做动画的元素
* json: 要做动画的属性键值对
* fn: 回调函数
*/
function Buffer(obj, json, fn) {
// 1. 清除定时器
clearInterval(obj.timer);
// 2. 设置定时器
var flag = true, begin, target;
obj.timer = setInterval(function () {
// 2.1 遍历json
for(var k in json){
// 2.1.1 获取做动画属性的初始值
if('opacity' == k){ // 透明度
begin = parseInt(parseFloat(getCssStyleAttr(obj, k)) *100) || 0;
target = parseInt(parseFloat(json[k])*100);
}else { // 其他动画
begin = parseInt(getCssStyleAttr(obj, k));
target = parseInt(json[k]);
}
// 2.1.2 获取动画的步长
var speed = (target - begin) / 20;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
// 2.1.3 设置缓动动画
if('opacity' == k ){ // 透明度
obj.style.opacity = (begin + speed) / 100;
obj.style.filter = 'alpha(opacity='+ (begin + speed) +')';
}else if('zIndex' == k){
obj.style.zIndex = json[k];
}else { // 其他情况
obj.style[k] = begin + speed + 'px';
}
// 2.1.4 判断是否清除定时器
flag = (begin != target) ? false : true;
}
// 2.2 清除定时器
if(flag){
clearInterval(obj.timer);
//判断
if(fn){
fn(); // 执行函数
}
}
}, 20);
}
function $(id) {
return document.getElementById(id);
}
function getCssStyleAttr(obj, attr) {
if(obj.currentStyle){
return obj.currentStyle[attr];
}else {
return window.getComputedStyle(obj, null)[attr];
}
}