GOOGLE 20120409 主页特效 <Doodle 跑马灯源码>

aerchi

浏览: 423592 次
性别:
来自: 昆明

最近访客更多访客>>

lesliehanhan

u012363178

wangyy

winja2008

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1016)

社区版块

存档分类

今天Google的Doodle是纪念埃德沃德·迈布里奇

埃德沃德·迈布里奇（Eadweard J. Muybridge，1830年4月9日－1904年5月8日），英国摄影师，他因使用多个相机拍摄运动的物体而著名，他发明的“动物实验镜”（Zoopraxiscope）是一种可以播放运动图像的投影机，将连续图像绘制在一块玻璃圆盘的边缘，随着玻璃的旋转，将影像投射出去，这样就使这些影象显得像在运动。

效果如下,代码页面

<html>

<head>

<metacharset="utf-8"/>

<title>Google
 Doodle跑马灯 代码</title>

</head>

<body>

<divid="hplogo"role="button"title="英国实验摄影师
 埃德沃德·迈布里奇 182 周年诞辰" 
style="background:url(http://www.google.com.hk/logos/2012/muybridge12-hp-f.jpg);cursor:pointer;height:162px;position:relative;width:469px;">

<divid="hplogo-p"style="background:url(http://www.google.com.hk/logos/2012/muybridge12-hp-p.jpg)
 0 0 no-repeat;height:54px;left:201px;position:absolute;top:54px;width:67px"></div>

<divid="hplogo-v"style="background:url(http://www.google.com.hk/logos/2012/muybridge12-hp-v.png);height:162px;left:0;position:absolute;top:0;width:469px"></div>

</div>

</body>

</html>

<scripttype="text/javascript">

(function()
 {

try
 {

window.google
 || (window.google = {});

google.doodle
 || (google.doodle = {});

var
 a, b, c, e, f, g = !1;

eval("google.doodle.mod=function(a,n){return
 a" + String.fromCharCode(37) + "n;}");

var
 h = google.doodle.mod,

i
 = function() {

g
 = false;

window.clearTimeout(google.doodle.a);

google.doodle.a
 = null

},

j
 = function() {

if
 (!google.doodle.g && google.dstr && google.rein) {

google.doodle.g
 = true;

google.dstr.push(i);

google.rein.push(j)

}

i();

google.doodle.cpDestroy
 = i;

google.doodle.cpInit
 = j;

a
 = document.getElementById("hplogo");

b
 = document.getElementById("hplogo-p");

if
 (a && b) {

a.onclick
 = function() {

if
 (google.doodle.a) {

i();

google.nav
 && google.nav.go ? google.nav.go("http://www.google.com.hksearch?q=%E5%9F%83%E5%BE%B7%E6%B2%83%E5%BE%B7%C2%B7%E8%BF%88%E5%B8%83%E9%87%8C%E5%A5%87&ct=muybridge12-hp&oi=ddle&hl=zh-CN")
 : window.location.href = "/search?q=%E5%9F%83%E5%BE%B7%E6%B2%83%E5%BE%B7%C2%B7%E8%BF%88%E5%B8%83%E9%87%8C%E5%A5%87&ct=muybridge12-hp&oi=ddle&hl=zh-CN"

}
 else k()

};

a.onmousedown
 = function() {

b.style.marginTop
 = "2px"

};

a.onmouseout
 = a.onmouseup = function() {

b.style.marginTop
 = ""

};

g
 = true;

e
 = c = 0;

f
 = 1;

if
 (google.browser && google.browser.engine.IE && google.browser.compareVersions("7", google.browser.engine.version) > 0) {

var
 d = document.getElementById("hplogo-v");

d.style.background
 = "";

d.style.filter
 = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.google.com.hklogos/2012/muybridge12-hp-v.png')";

try
 {

document.execCommand("BackgroundImageCache",
 false, true)

}
 catch(m) {}

}

}

},

k
 = function() {

var
 d = h(c, 67);

if
 (f < 63)f=
 f * 1.05;

else
 if (d > 0 && d < 4)
 {

f=67;

c=
 c - d

}

c=h(c
 + f, 804);

a.style.backgroundPosition
 = -c + "px 0";

if
 (e < 67) {

e=
 e + f;

b.style.backgroundPosition=
 a.style.backgroundPosition

}

if
 (g) google.doodle.a=window.setTimeout(k,
 41)

};

google.x
 ? google.x({

id:
 "DOODLE"

},

j)
 : j()

}
 catch(l) {

google.ml(l,
 !1, {

cause:
 "DOODLE"

})

};

})();

</script>

这次的代码不复杂,主要是使用css的背景属性,使用计时器,改变时间,调整图片背景的位置达到动画效果.

www.talaland.com/2012-04-09-google-doodle-source/

分享到：

java.util.regex.Pattern类使用 | Java 正则表达式

2012-04-09 09:33
浏览 301
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

GOOGLE 20120409 主页特效 <Doodle 跑马灯源码>

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

GOOGLE 20120409 主页特效 <Doodle 跑马灯 源码>

评论

发表评论

相关推荐

最近访客更多访客>>

GOOGLE 20120409 主页特效 <Doodle 跑马灯源码>