點擊這裡查看效果
以下是源代碼，保存到html文件打開就可以查看效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google粘土動畫Doodle代碼-</title>
<script type="text/javascript" src="http:///keleyi/phtml/jstexiao/8/js/keleyi.niantu.js"></script>
<script type="text/javascript">
window.onload = function () {
new animation({ element: "Div1", url: 'http:///keleyi/phtml/jstexiao/8/images/15_gumby11-blockheads.jpg', hover: function () { this.element.style.backgroundPositionX = '-135px'; }, blur: function () { this.element.style.backgroundPositionX = '0'; } });
new animation({ element: "Div2", url: 'http:///keleyi/phtml/jstexiao/8/images/16_gumby11-prickle.jpg', hover: function () { this.element.style.backgroundPositionX = '-335px'; }, blur: function () { this.element.style.backgroundPositionX = '-270px'; } });
new animation({ element: "Div3", url: 'http:///keleyi/phtml/jstexiao/8/images/17_gumby11-goo.png', hover: function () { this.element.style.backgroundPositionX = '-467px'; }, blur: function () { this.element.style.backgroundPositionX = '-400px'; } });
new animation({ element: "Div4", url: 'http:///keleyi/phtml/jstexiao/8/images/10_gumby11-gumby.jpg', hover: function () { this.element.style.backgroundPositionX = '-780px'; }, blur: function () { this.element.style.backgroundPositionX = '-682px'; } });
new animation({ element: "Div5", url: 'http:///keleyi/phtml/jstexiao/8/images/18_gumby11-pokey.png', hover: function () { this.element.style.backgroundPositionX = '-609px'; }, blur: function () { this.element.style.backgroundPositionX = '-534px'; } });
};
</script>
<style type="text/css">
div{position:relative;}
</style>
</head>
<body>
<div style="width:736px;margin:10px auto;border:1px solid silver;position:relative;">
<div><h2>Google粘土動畫Doodle代碼·</h2><a href="http:///a/bjac/3iote6u9.htm" target="_blank">原文</a></div>
請點擊以下“粘土”</div>
<div style="width:436px;margin:50px auto;position:relative;">
<div style="width:135px;height:156px;background:url(http:///keleyi/phtml/jstexiao/8/images/6_gumby11-initial-sprite.png) 0 0;" id="Div1"></div>
<div style="left:138px;top:40px;width:65px;height:102px;background:url(http:///keleyi/phtml/jstexiao/8/images/6_gumby11-initial-sprite.png) -270px 0;position:absolute" id="Div2"></div>
<div style="left:196px;top:14px;width:67px;height:144px;background:url(http:///keleyi/phtml/jstexiao/8/images/6_gumby11-initial-sprite.png) -400px 0;z-index:90;position:absolute" id="Div3"></div>
<div style="left:246px;top:-6px;width:98px;height:156px;background:url(http:///keleyi/phtml/jstexiao/8/images/6_gumby11-initial-sprite.png) -682px 0;position:absolute" id="Div4"></div>
<div style="left:323px;top:50px;width:75px;height:108px;background:url(http:///keleyi/phtml/jstexiao/8/images/6_gumby11-initial-sprite.png) -534px 0;position:absolute" id="Div5"></div>
</div>
</body>
</html>