27.项目 1-博客前端：封装库--同步动画

学习要点：

1.问题所在
2.设置代码

本节课，我们主要解决一下多个动画同时运行的问题。

一．问题所在

在百度分享侧栏拖动滚动条的时候，我们希望能随着滚动条的滚动而一直保持居中。我
们希望能够实现比如加长加宽这种同时运动的动画效果。

二．设置代码

//跨浏览器获取滚动条位置
function getScroll() {
return {
top : document.documentElement.scrollTop || document.body.scrollTop,
left : document.documentElement.scrollLeft || document.body.scrollLeft
}
}
//初始位置
$('#share').css('top', getScroll().top + (getInner().height - parseInt(getStyle($('#share').first(), 'height'))) / 2 + 'px');
//滚动条事件
addEvent(window, 'scroll', function () {
$('#share').animate({
attr : 'y',
target : getScroll().top + (getInner().height - parseInt(getStyle($('#share').first(), 'height'))) / 2
});
});
//扩展更多的属性
var attr = obj['attr'] == 'x' ? 'left' : obj['attr'] == 'y' ? 'top' :
obj['attr'] == 'w' ? 'width' : obj['attr'] == 'h' ? 'height' :
obj['attr'] == 'o' ? 'opacity' : obj['attr'] != undefined ? obj['attr'] : 'left';

PS：可以通过传递一个对象的键值对，来传递多组动画。然后循环显示。

//接收多组键值对
var mul = obj['mul'];
//单个动画和多个动画至少传递一个
if (alter != undefined && target == undefined) {
target = alter + start;
} else if (alter == undefined && target == undefined && mul == undefined) {
throw new Error('alter 增量或 target 目标量必须传一个！');
}
//在定时器里循环
for (var i in mul) {
attr = i == 'x' ? 'left' : i == 'y' ? 'top' : i == 'w' ? 'width' : i == 'h' ? 'height' : i == 'o' ?
'opacity' : i != undefined ? i : 'left';
target = mul[i];
}
//如果是单个动画
if (mul == undefined) {
mul = {};
mul[attr] = target;
}

感谢收看本次教程！