仿谷歌主页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 相关文章推荐
javascript下有关dom以及xml节点访问兼容问题
Nov 26 Javascript
setTimeout和setInterval的区别你真的了解吗?
Mar 31 Javascript
写得不错的jquery table鼠标经过变色代码
Sep 27 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
Nov 07 Javascript
javascript显示中文日期的方法
Jun 18 Javascript
JS+CSS实现滑动切换tab菜单效果
Aug 25 Javascript
vue.js中过滤器的使用教程
Jun 08 Javascript
Vue数组更新及过滤排序功能
Aug 10 Javascript
ES6解构赋值的功能与用途实例分析
Oct 31 Javascript
vue实现nav导航栏的方法
Dec 13 Javascript
webpack手动配置React开发环境的步骤
Jul 02 Javascript
JavaScript缓动动画函数的封装方法
Nov 25 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源代码
2013/06/26 PHP
跟我学Laravel之视图 &amp; Response
2014/10/15 PHP
使用WordPress发送电子邮件的相关PHP函数用法解析
2015/12/15 PHP
Yii2框架BootStrap样式的深入理解
2016/11/07 PHP
PHP中数组转换为SimpleXML教程
2019/01/27 PHP
JQuery之拖拽插件实现代码
2011/04/14 Javascript
异步javascript的原理和实现技巧介绍
2012/11/08 Javascript
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
用javascript删除当前行,添加行(示例代码)
2013/11/25 Javascript
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
javascript显示上周、上个月日期的处理方法
2016/02/03 Javascript
详解JavaScript数组和字符串中去除重复值的方法
2016/03/07 Javascript
全面解析多种Bootstrap图片轮播效果
2016/05/27 Javascript
BootStrap实现轮播图效果(收藏)
2016/12/30 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
Node.js 8 中的 util.promisify的详解
2017/06/12 Javascript
vue.js单文件组件中非父子组件的传值实例
2018/09/13 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
2020/08/21 Javascript
解决layer.confirm快速点击会重复触发事件的问题
2019/09/23 Javascript
python绘图库Matplotlib的安装
2014/07/03 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
Numpy将二维数组添加到空数组的实现
2019/12/05 Python
Python获取、格式化当前时间日期的方法
2020/02/10 Python
HTML5的video标签的浏览器兼容性增强方案分享
2016/05/19 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(二)
2013/01/21 HTML / CSS
Nike澳大利亚官网:Nike.com (AU)
2019/06/03 全球购物
离婚上诉状范文
2015/05/23 职场文书
2015年信息宣传工作总结
2015/05/26 职场文书
悬崖上的金鱼姬观后感
2015/06/15 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书
终止合同协议书范本
2016/03/22 职场文书
MySQL Router的安装部署
2021/04/24 MySQL
Windows中Redis安装配置流程并实现远程访问功能
2021/06/07 Redis
SQL实现LeetCode(177.第N高薪水)
2021/08/04 MySQL
PHP正则表达式之RCEService回溯
2022/04/11 PHP
Python面试不修改数组找出重复的数字
2022/05/20 Python