仿谷歌主页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 05 Javascript
常见表单重复提交问题整理及解决方法
Nov 13 Javascript
javascript写的一个模拟阅读小说的程序
Apr 04 Javascript
javascript 获取浏览器版本
Jan 21 Javascript
javascript动态创建链接的方法
May 13 Javascript
JavaScript的设计模式经典之建造者模式
Feb 24 Javascript
Bootstrap CSS布局之图像
Dec 17 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
Feb 27 Javascript
vue数据双向绑定原理解析(get &amp; set)
Mar 08 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
Mar 14 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
Jul 13 Javascript
vue+axios+element ui 实现全局loading加载示例
Sep 11 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 ? EasyUI DataGrid 资料存的方式介绍
2012/11/07 PHP
PHP 魔术变量和魔术函数详解
2015/02/25 PHP
求帮忙修改个php curl模拟post请求内容后并下载文件的解决思路
2015/09/20 PHP
thinkPHP统计排行与分页显示功能示例
2016/12/02 PHP
PHP基于Closure类创建匿名函数的方法详解
2017/08/17 PHP
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
2013/02/05 Javascript
input输入框的自动匹配(原生代码)
2013/03/19 Javascript
JavaScript中判断整数的多种方法总结
2014/11/08 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
全面详细的jQuery常见开发技巧手册
2016/02/21 Javascript
常用的JQuery函数及功能小结
2016/03/24 Javascript
深入理解jQuery事件绑定
2016/06/02 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
Vue学习笔记进阶篇之函数化组件解析
2017/07/21 Javascript
vue跨域解决方法
2017/10/15 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
详解vue2.0 资源文件assets和static的区别
2018/11/27 Javascript
简单通过settimeout看javascript的运行机制
2019/05/10 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
2019/05/26 Javascript
解决layui使用layui-icon出现默认图标的问题
2019/09/11 Javascript
JS PHP字符串截取函数实现原理解析
2020/08/29 Javascript
[03:07]DOTA2英雄基础教程 冰霜诅咒极寒幽魂
2013/12/06 DOTA
进一步探究Python中的正则表达式
2015/04/28 Python
在arcgis使用python脚本进行字段计算时是如何解决中文问题的
2015/10/18 Python
利用Python读取文件的四种不同方法比对
2017/05/18 Python
python 文件转成16进制数组的实例
2018/07/09 Python
解决python 自动安装缺少模块的问题
2018/10/22 Python
python使用 zip 同时迭代多个序列示例
2019/07/06 Python
Python turtle库的画笔控制说明
2020/06/28 Python
【魔兽争霸3重制版】原版画面与淬火MOD画面对比
2021/03/26 魔兽争霸
打架检讨书300字
2014/02/02 职场文书
《动手做做看》教学反思
2014/04/09 职场文书
四查四看整改措施
2014/09/19 职场文书
如何书写你的职业生涯规划书?
2019/06/27 职场文书
【DOTA2】当街暴打?PSG LGD vs VG - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA
Spring Boot 使用 Spring-Retry 进行重试框架
2022/04/24 Java/Android