今天google 首页的javascript 动画实现。好吧,我来晚了。。。

很多人都对今天google 首页的动态logo 感兴趣,我也照着实现了一下,但是刚刚发现园子里已经有人捷足先登了(请看这里)。。。

毕竟是自己的劳动成果,我想就还是发了吧,其实 胡尐睿丶 同学的实现还是有点投机取巧的,他把动画执行完成后生成的html 全部复制下来了,先全部隐藏然后再逐个显现。。。

我的方法则是和google 一样,不断的插入带有背景的div 来实现的,先是建立一个这些div 样式信息[left, top, width, height, background-position-x, background-position-y] 的数组,然后用setTimeout 定时地插入带有这些样式的div 即可。

效果如下:(点击运行

动画中用到的背景图片:

代码则比较简单:

复制代码
(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);
})();

})();
复制代码
posted @   hihuimin  阅读(8882)  评论(34编辑  收藏  举报
编辑推荐:
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
点击右上角即可分享
微信分享提示