`
robot2008
  • 浏览: 6858 次
  • 性别: Icon_minigender_1
  • 来自: 广州
最近访客 更多访客>>
文章分类
社区版块
存档分类

Google首页又玩动画,仿一个看看,附源码下载

阅读更多
打开google,发现logo又有新玩意了,又是动画,简单看了一下,还是原来的老样子,将图片一部分一部分的显示出来做成动画效果,粗略估计了一下,功能应该挺简单的,隔了好久没手写js了,手痒痒,于是准备动手写几行代码看看。谁知,一写又是一大串,不扯那么多,效果图如下:
  

IE的博文不能加脚本和css,点击这里可以看到DEMO

功能挺简单:
1.可以自动根据动画容器的尺寸来将图片分割成不同帧。
2.理论上支持图片中的帧可多行排列(比如:要播放的动画有30帧,google现在的做法是全部放在1行,理论上这里可以放成3行,每行10帧)。
3.纯手写,没有引用其它js框架辅助.
 
没去分析google的js,不知道他们的图片是怎么弄的,下载到的图片前段部分有空白,所以用ps小小处理了一下。
只是模仿了动画部分,一些细节没做处理,比如google首页载入后有个动画是自动播放且在没点击前是重复播放的。 
另外还有个缺点,依赖播放容器的background属性,代码写得太长了,就没多大兴趣了,没去研究怎么改进,有兴趣的同学可以处理一下。
代码写得比较乱,有简单注释,大家凑合着看看。代码可无限制使用,但出了问题自己负责修复,当然,有空的话也不妨把改进后的版本发给我。 
 
附源码下载:点我下载 
加DEMO到文章里加得好辛苦,觉得有用的同学不妨点点推荐或留个回复鼓励一下...
(完) 
7
3
分享到:
评论
5 楼 ajaxdwr151012 2011-10-12  
顶一个
4 楼 lxs647 2011-10-12  
试了一下,最后画面还原的时候,貌似有跳帧现象、、、
3 楼 悬空90 2011-10-12  
果然是牛人
2 楼 robot2008 2011-10-12  
baiiiuuu 写道
好.....帮你顶!

谢谢,希望对你有用。
1 楼 baiiiuuu 2011-10-12  
好.....帮你顶!

相关推荐

    google首页菜单动画源码

    "Google首页菜单动画源码"是一个关于谷歌搜索引擎主页菜单动态效果的编程实例。这个压缩包包含了一系列用于实现这一功能的文件,让我们逐一解析它们。 1. **homepage.css**:这是一个CSS(层叠样式表)文件,它是...

    Python小游戏源码-仿Google小恐龙游戏源码

    【Python小游戏源码-仿Google小恐龙游戏源码】是一个基于Python编程语言开发的简易版游戏,灵感来源于Google Chrome浏览器中的经典离线小游戏——小恐龙跑酷。这个游戏旨在帮助初学者理解Python编程语言,特别是游戏...

    仿电视剧网站源码

    在设计和实现这样一个仿电视剧网站的过程中,以下是一些关键的技术知识点: 1. **前端开发**: - **HTML/CSS**:基础的网页结构和样式定义,用于布局和美化页面。 - **JavaScript**:实现交互效果,如视频播放...

    安卓Android源码——仿谷歌侧边栏导航源码.zip

    在实际使用这个源码时,你需要将`Android 仿谷歌侧边栏导航源码`这个文件夹中的所有内容导入到一个新的或现有的Android项目中。确保所有依赖的库(如`appcompat-v7`,用于支持旧版本Android的兼容库)已正确添加,并...

    Android 高仿点心桌面皮肤源码.zip源码资源下载

    通过研究这份源码,开发者不仅可以学习到如何创建一个具有吸引力的Android桌面应用,还能提升自己的Android开发技能,包括UI设计、性能优化、多线程编程等多个方面。这是一份宝贵的教育资源,对于想要提升Android...

    Android 仿谷歌侧边栏导航源码.zip

    "Android 仿谷歌侧边栏导航源码.zip" 是一个包含源代码的压缩包,旨在帮助开发者了解并实现类似谷歌风格的侧边栏导航功能。这个项目可能包括了必要的布局文件、Java或Kotlin类、资源文件等,以实现滑动抽屉效果和...

    Android应用源码(精)仿博客园客户端源码.rar

    总的来说,这个仿博客园客户端源码是一个极好的学习资源,涵盖了Android应用开发的多个方面,包括UI设计、数据管理、网络通信、多线程、权限管理和通知。通过分析和学习这个源码,开发者可以提升自己的Android开发...

    Android应用源码高仿安卓微信UI项目.zip

    这个“Android应用源码高仿安卓微信UI项目”是一个基于Java编程语言的开源项目,旨在模仿和实现微信的用户界面(UI)设计。通过研究这个项目,开发者可以深入理解如何在Android平台上构建类似微信的复杂交互和视觉...

    Android仿苹果通话界面源码

    "Android仿苹果通话界面源码"是一个专为Android平台设计的项目,其目标是模仿苹果设备上的通话界面。这个源码包,命名为"Phones",包含了实现这一功能所需的全部代码和资源。 首先,我们来看看核心知识点: 1. **...

    安卓Android源码——仿ES文件浏览器.zip

    这个压缩包“安卓Android源码——仿ES文件浏览器.zip”包含了开发一个类似ES文件浏览器的Android应用的相关源代码。ES文件浏览器是一款流行的文件管理应用,它提供了丰富的功能,如浏览本地和网络文件、压缩与解压缩...

    Android应用源码之仿google play侧滑菜单.zip

    本资源"Android应用源码之仿google play侧滑菜单.zip"提供了一个实现类似Google Play应用侧滑菜单的示例代码,对于理解和学习Android应用开发中的侧滑菜单实现非常有帮助。 首先,我们来看侧滑菜单的核心组件:`...

    Android应用源码之listview 的各种动画效果.zip

    - `android-viewanimation`:另一个常用的库,提供了滑动、弹跳等动画效果,适用于ListView和其他视图。 - `android-transitions`: Google官方支持的过渡动画库,可以实现更高级的视图转换动画。 5. **实现步骤**...

    安卓Android源码——高仿360云盘UI.zip

    由于提供的列表只有一个文件名:“安卓Android源码——高仿360云盘UI.rar”,这看起来是一个RAR压缩文件,而不是ZIP文件,可能是打字错误。RAR是一种常见的文件压缩格式,通常用于打包多个文件和文件夹。在这个上下...

    Android高级应用源码-仿google play侧滑菜单.zip

    通过深入研究这个源码,开发者不仅可以学到如何创建一个仿Google Play的侧滑菜单,还能对Android早期的Holo主题有更深入的理解,这对于维护旧版本应用或者了解Android设计演进历程非常有价值。同时,这也是提升...

    Android 仿新版人人的效果源码.rar

    "Android 仿新版人人的效果源码"提供了一个学习平台,让你能够深入理解如何在Android上实现类似人人网的新版界面和功能。这个源码库可能是为了帮助开发者了解如何使用Android SDK来创建社交应用的界面和交互,尤其是...

    Android 仿ES界面浏览器源码.zip

    首先,我们来看“Android 仿ES界面浏览器”这一主题,它表明这个项目的目标是模仿Elasticsearch(简称ES)的用户界面,并将其移植到Android平台上,实现一个移动版的浏览应用。 1. **Android 开发**: Android平台...

    google首页电吉他源码

    谷歌首页的电吉他源码是谷歌为庆祝著名音乐家或音乐事件而推出的一种互动彩蛋。这个源码包含了实现这一功能的关键技术元素,包括JavaScript(js)、Flash(swf)和图像资源(png)。让我们深入了解一下这些组成部分...

    Android应用源码之基于股票的一个应用(内含源码)-IT计算机-毕业设计.zip

    在本资源中,我们拥有一个基于股票的Android应用源码,这对于学习Android开发,特别是针对毕业设计的学生来说,是一个非常有价值的参考资料。这个应用可能包含了从数据获取、界面设计到交互实现等一系列Android应用...

    2个G的java实例源码以及开源项目源码

    2个G的java实例源码以及开源项目源码,源码难易程度分为初级、中级、高级等,详情看源码列表,需要的可以直接下载! Eclipse 的 JavaScript 插件 JSEditor . zip GIF 动画制作工具 GiftedMotion . zip github - ...

    仿google play侧滑菜单

    `HoloEverywhere-master`看起来是一个开源项目的名字,它可能包含了实现仿Google Play侧滑菜单的代码,特别是对于早期Android版本,`HoloEverywhere`库可以帮助开发者在低于Android 4.0版本的设备上实现Holo风格的...

Global site tag (gtag.js) - Google Analytics