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


Posted in Javascript onJuly 14, 2013

源代码:

<!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>谷歌主页动画</title>
<style type="text/css">
.animate{
 height:156px;
 width:97px;
 background:url(images/gumby11-gumby.jpg) no-repeat;
 background-position:-15581px center;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
 var offset = -15678;
 $('#start').click(function(){
  var timer = setInterval(function(){
   offset += 98;
   $('#animate').css({
    'background-position':offset + 'px center'
   });
   if(offset > 0){
    clearInterval(timer);
   }
  },50);
  $(this).hide();
 });
});
</script>
</head>
<body>
 <div id="animate" class="animate"></div>
 <a id="start" href="javascript:void(0)">动起来吧!</a>
</body>
</html>

其实这动画不难,难在那种图片上,不知道这图片是怎么做出来的!!!
Javascript 相关文章推荐
文本框的字数限制功能jquery插件
Nov 24 Javascript
高亮显示web页表格行的javascript代码
Nov 19 Javascript
DOM基础教程之事件类型
Jan 20 Javascript
jquery制作多功能轮播图插件
Apr 02 Javascript
关于Javascript中document.cookie的使用
Mar 08 Javascript
微信小程序开发教程之增加mixin扩展
Aug 09 Javascript
JS非行间样式获取函数的实例代码
Jun 05 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
Nov 25 Javascript
React 组件渲染和更新的实现代码示例
Feb 21 Javascript
vue+element+Java实现批量删除功能
Apr 08 Javascript
微信小程序wxs实现吸顶效果
Jan 08 Javascript
vue组件中传值EventBus的使用及注意事项说明
Nov 16 Javascript
jquery.messager.js插件导致页面抖动的解决方法
Jul 14 #Javascript
jquery实现输入框动态增减的实例代码
Jul 14 #Javascript
javascript获取隐藏dom的宽高 具体实现
Jul 14 #Javascript
js和as的稳定传值问题解决
Jul 14 #Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
Jul 14 #Javascript
javascript实现TreeView 无刷新展开的实例代码
Jul 13 #Javascript
Jquery封装tab自动切换效果的具体实现
Jul 13 #Javascript
You might like
PHP使用静态方法的几个注意事项
2014/09/16 PHP
使用PHP接受文件并获得其后缀名的方法
2015/08/05 PHP
php+mongodb判断坐标是否在指定多边形区域内的实例
2016/10/28 PHP
动态加载iframe
2006/06/16 Javascript
javascript操作cookie_获取与修改代码
2009/05/21 Javascript
IE6下opacity与JQuery的奇妙结合
2013/03/01 Javascript
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
14款NodeJS Web框架推荐
2014/07/11 NodeJs
JavaScript中的alert()函数使用技巧详解
2014/12/29 Javascript
JavaScript中的依赖注入详解
2015/03/18 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
2016/02/15 Javascript
jQuery基于muipicker实现仿ios时间选择
2016/02/22 Javascript
jQuery实现查找最近父节点的方法
2016/06/23 Javascript
详解Angular2中的编程对象Observable
2016/09/17 Javascript
JS 实现可停顿的垂直滚动实例代码
2016/11/23 Javascript
Javascript基础回顾之(二) js作用域
2017/01/31 Javascript
详解webpack+angular2开发环境搭建
2017/06/28 Javascript
基于JSON数据格式详解
2017/08/31 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
2017/09/27 Javascript
2种简单的js倒计时方式
2017/10/20 Javascript
AngularJS下$http服务Post方法传递json参数的实例
2018/03/29 Javascript
react+ant design实现Table的增、删、改的示例代码
2018/12/27 Javascript
JS简单表单验证功能完整示例
2020/01/26 Javascript
extjs4图表绘制之折线图实现方法分析
2020/03/06 Javascript
Python中Numpy ndarray的使用详解
2019/05/24 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
常用的10个Python实用小技巧
2020/08/10 Python
python 爬取腾讯视频评论的实现步骤
2021/02/18 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
css3 矩阵的使用详解
2018/03/20 HTML / CSS
美国知名生活购物网站:Goop
2017/11/03 全球购物
英国票务网站:Ticketmaster英国
2018/08/27 全球购物
澳大利亚在线购买葡萄酒:The Wine Collective
2020/02/20 全球购物
EJB timer的种类
2014/10/28 面试题
幼儿园校园小喇叭广播稿
2014/10/17 职场文书
Mysql如何实现不存在则插入,存在则更新
2022/03/25 MySQL