今天google 首页的javascript 动画实现。好吧,我来晚了。。。
很多人都对今天google 首页的动态logo 感兴趣,我也照着实现了一下,但是刚刚发现园子里已经有人捷足先登了(请看这里)。。。
毕竟是自己的劳动成果,我想就还是发了吧,其实 胡尐睿丶 同学的实现还是有点投机取巧的,他把动画执行完成后生成的html 全部复制下来了,先全部隐藏然后再逐个显现。。。
我的方法则是和google 一样,不断的插入带有背景的div 来实现的,先是建立一个这些div 样式信息[left, top, width, height, background-position-x, background-position-y] 的数组,然后用setTimeout 定时地插入带有这些样式的div 即可。
效果如下:(点击运行!)
![现代舞先驱玛莎·葛兰姆 117 周年诞辰 现代舞先驱玛莎·葛兰姆 117 周年诞辰](https://images.cnblogs.com/cnblogs_com/eric6/285160/o_graham11-hp-start.png)
动画中用到的背景图片:
代码则比较简单:
(function() {
var style_info = [
[307,48,88,89,0,0],
[307,48,89,89,-88,0],
//此处省略n行...
];
var logo = document.getElementById('hplogo');
(function logo_run() {
setTimeout( function() {
var a, div;
if (a = style_info.shift()) {
div = document.createElement('div');
div.style.cssText = 'position:absolute;'+
'left:'+a[0]+'px;top:'+a[1]+'px;width:'+a[2]+'px;height:'+a[3]+'px;'+
'background:url("graham11-hp-sprite.png") no-repeat '+a[4]+'px '+a[5]+'px;';
logo.appendChild(div);
logo_run();
}
}, 83);
})();
})();