仿谷歌主页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 相关文章推荐
JS实现选项卡实例详解
Nov 17 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
May 10 Javascript
js获取元素的外链样式的简单实现方法
Jun 06 Javascript
js实现悬浮窗效果(支持拖动)
Mar 09 Javascript
详解Vue中过度动画效果应用
May 25 Javascript
详解vue mint-ui源码解析之loadmore组件
Oct 11 Javascript
原生js+cookie实现购物车功能的方法分析
Dec 21 Javascript
简述vue状态管理模式之vuex
Aug 29 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
May 07 Javascript
vue组件命名和props命名代码详解
Sep 01 Javascript
javascript实现贪吃蛇游戏(娱乐版)
Aug 17 Javascript
五句话帮你轻松搞定js原型链
Dec 09 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
一个程序下载的管理程序(一)
2006/10/09 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
PHP实现将多个文件中的内容合并为新文件的方法示例
2017/06/10 PHP
centos7上编译安装php7以php-fpm方式连接apache
2018/11/08 PHP
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
2010/04/14 Javascript
js 中 document.createEvent的用法
2010/08/29 Javascript
javascript权威指南 学习笔记之javascript数据类型
2011/09/24 Javascript
js 走马灯简单实例
2013/11/21 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
2013/11/29 Javascript
SpringMVC返回json数据的三种方式
2015/12/10 Javascript
jquery基础知识第一讲之认识jquery
2016/03/17 Javascript
微信小程序 wx:key详细介绍
2016/10/28 Javascript
Three.js基础部分学习
2017/01/08 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
2017/01/13 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
layui.js实现的表单验证功能示例
2017/11/15 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
2017/11/22 Javascript
sublime text配置node.js调试(图文教程)
2017/11/23 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
2018/07/26 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
微信小程序实现文字无限轮播效果
2018/12/28 Javascript
详解vue的数据劫持以及操作数组的坑
2019/04/18 Javascript
解决Element中el-date-picker组件不回填的情况
2020/11/07 Javascript
[01:58]DOTA2上海特级锦标赛现场采访:RTZ这个ID到底好不好
2016/03/25 DOTA
[01:13:51]TNC vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python自动化测试之从命令行运行测试用例with verbosity
2014/09/28 Python
用Python展示动态规则法用以解决重叠子问题的示例
2015/04/02 Python
Flask框架的学习指南之开发环境搭建
2016/11/20 Python
20个常用Python运维库和模块
2018/02/12 Python
python模块之subprocess模块级方法的使用
2019/03/26 Python
python读取mysql数据绘制条形图
2020/03/25 Python
选购国际女性时装设计师品牌:IFCHIC(支持中文)
2018/04/12 全球购物
应届生污水处理求职信
2013/11/06 职场文书
计算机应用专业推荐信
2013/11/13 职场文书
学校门卫岗位职责
2014/03/16 职场文书
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫