仿谷歌主頁js動畫效果實現代碼

昨天看到谷歌的主頁上出現了幾個動畫發現不是flash做的而是用js+圖片實現的！今天把拷貝到的圖片用js實現了動畫效果！

　　源代碼

復制代碼代碼如下:
<!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN" "
<html xmlns="
<head>
<meta httpequiv="ContentType" content="text/html; charset=utf" />
<title>谷歌主頁動畫</title>
<style type="text/css">
animate{
height:px;
width:px;
background:url(images/gumbygumbyjpg) norepeat;
backgroundposition:px center;
}
</style>
<script type="text/javascript" src="
<script type="text/javascript">
$(function(){
var offset = ;
$(#start)click(function(){
var timer = setInterval(function(){
   offset += ;
   $(#animate)css({
    backgroundposition:offset + px center
   });
   if(offset > ){
    clearInterval(timer);
   }
});
$(this)hide();
});
});
</script>
</head>
<body>
<div id="animate" class="animate"></div>
<a id="start" href="javascript:void()">動起來吧！</a>
</body>
</html>

　　
其實這動畫不難難在那種圖片上不知道這圖片是怎麼做出來的！！！

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20275.html