熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

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

2013-11-15 12:05:45  來源: JSP教程 
昨天看到谷歌的主頁上出現了幾個動畫發現不是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
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.