设为首页收藏本站
切换到宽版

电脑疯子技术论坛|电脑极客社区

 找回密码
 注册

QQ登录

只需一步，快速开始

电脑疯子技术论坛|电脑极客社区»技术论坛 › 电脑疯子|系统推荐 › VIP会员专区 › 仿谷歌主页js动画效果实现代码
返回列表 发新帖

仿谷歌主页js动画效果实现代码

 关闭 [复制链接]
bek 发表于 2013-7-15 02:06:12 | 显示全部楼层 |阅读模式

  2. <p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html
  5. xmlns="http://www.w3.org/1999/xhtml">
  6. <head>
  7. <meta
  8. http-equiv="Content-Type" content="text/html; charset=utf-8"
  9. />
  10. <title>谷歌主页动画</title>
  11. <style
  12. type="text/css">
  13. .animate{
  14. height:156px;
  15. width:97px;
  16. background:url(images/gumby11-gumby.jpg)
  17. no-repeat;
  18. background-position:-15581px
  19. center;
  20. }
  21. </style>
  22. <script type="text/javascript"
  23. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  24. <script
  25. type="text/javascript">
  26. $(function(){
  27. var offset =
  28. -15678;
  29. $('#start').click(function(){
  30.   var timer =
  31. setInterval(function(){
  32.    offset += 98;
  33.    
  34. $('#animate').css({
  35.     'background-position':offset + 'px
  36. center'
  37.    });
  38.    if(offset >
  39. 0){
  40.     clearInterval(timer);
  41.    }
  42.   
  43. },50);
  44.   
  45. $(this).hide();
  46. });
  47. });
  48. </script>
  49. </head>
  50. <body>
  51. <div
  52. id="animate" class="animate"></div>
  53. <a id="start"
  54. href="javascript:void(0)">动起来吧！</a>
  55. </body>
  56. </html></p>
复制代码
javascript, background, 谷歌主页, content, animate

相关帖子
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册

本版积分规则

手机版|小黑屋|VIP|电脑疯子技术论坛 ( Computer madman team )

GMT+8, 2025-1-23 06:08

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.

快速回复 返回顶部 返回列表