仿谷歌主页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 相关文章推荐
层序遍历在ExtJs的TreePanel中的应用
Oct 16 Javascript
js 静态动态成员 and 信息的封装和隐藏
May 29 Javascript
from表单多个按钮提交用onclick跳转不同action
Apr 24 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
Dec 15 Javascript
js动态生成form 并用ajax方式提交的实现方法
Sep 09 Javascript
微信小程序 chooseImage选择图片或者拍照
Apr 07 Javascript
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
vue bus全局事件中心简单Demo详解
Feb 26 Javascript
浅谈vue父子组件怎么传值
Jul 21 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
Nov 10 Javascript
利用js-cookie实现前端设置缓存数据定时失效
Jun 18 Javascript
JS实现的碰撞检测与周期移动完整示例
Sep 02 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版
2012/04/20 PHP
php stream_get_meta_data返回值
2013/09/29 PHP
php cookie名使用点号(句号)会被转换
2014/10/23 PHP
php支持断点续传、分块下载的类
2016/05/02 PHP
Laravel Reponse响应客户端示例详解
2020/09/03 PHP
jQuery.Autocomplete实现自动完成功能(详解)
2010/07/13 Javascript
jquery 图片轮换效果
2010/07/29 Javascript
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
我的NodeJs学习小结(一)
2014/07/06 NodeJs
Bootstrap组件学习之导航、标签、面包屑导航(精品)
2016/05/17 Javascript
vue2组件实现懒加载浅析
2017/03/29 Javascript
简单谈谈JS中的正则表达式
2017/09/11 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
2017/11/28 Javascript
使用vue-router为每个路由配置各自的title
2018/07/30 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
javascript将扁平的数据转为树形结构的高效率算法
2020/02/27 Javascript
JS一次前端面试经历记录
2020/03/19 Javascript
详解JavaScript 异步编程
2020/07/13 Javascript
vue-amap根据地址回显地图并mark的操作
2020/11/03 Javascript
[00:55]2015国际邀请赛中国区预选赛5月23日——28日约战上海
2015/05/25 DOTA
django缓存配置的几种方法详解
2018/07/16 Python
Python打包方法Pyinstaller的使用
2018/10/09 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
使用css3做0.5px的细线的示例代码
2018/01/18 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
2020/04/14 HTML / CSS
2019年.net常见面试问题
2012/02/12 面试题
信息管理专业学生自荐信格式
2013/09/22 职场文书
婚礼证婚人证婚词
2014/01/08 职场文书
奶茶店创业计划书
2014/08/14 职场文书
护士先进个人总结
2015/02/13 职场文书
心得体会格式及范文
2016/01/25 职场文书
解决Jenkins集成SonarQube遇到的报错问题
2021/07/15 Java/Android
Pygame Event事件模块的详细示例
2021/11/17 Python
前端实现滑动按钮AJAX与后端交互的示例代码
2022/02/24 Javascript
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python
Golang并发工具Singleflight
2022/05/06 Golang