zoukankan      html  css  js  c++  java
  • 闲来无事,写了段js仿google首页动画,附源码下载

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

    DEMO(点击图片即可):

    功能挺简单:
    1.可以自动根据动画容器的尺寸来将图片分割成不同帧。
    2.理论上支持图片中的帧可多行排列(比如:要播放的动画有30帧,google现在的做法是全部放在1行,理论上这里可以放成3行,每行10帧)。
    3.纯手写,没有引用其它js框架辅助.
    没去分析google的js,不知道他们的图片是怎么弄的,下载到的图片前段部分有空白,所以用ps小小处理了一下。

    只是模仿了动画部分,一些细节没做处理,比如google首页载入后有个动画是自动播放且在没点击前是重复播放的。 

    另外还有个缺点,依赖播放容器的background属性,代码写得太长了,就没多大兴趣了,没去研究怎么改进,有兴趣的同学可以处理一下。
    代码写得比较乱,有简单注释,大家凑合着看看。代码可无限制使用,但出了问题自己负责修复,当然,有空的话也不妨把改进后的版本发给我。 

    附源码下载:点我下载 

    加DEMO到文章里加得好辛苦,觉得有用的同学不妨点点推荐或留个回复鼓励一下...

    (完) 

  • 相关阅读:
    50道sql练习题和答案
    异步编程的数据同步
    浅说异步编程
    进程、应用程序域,线程和上下文之间的关系
    关于薪资和技术的一些思考
    SharePoint2013 列表栏设置
    SharePoint2013 功能区的配置
    EF Code First 数据迁移配置
    EF CodeFirst 数据库初始化策略
    用加减边距写图片轮播
  • 原文地址:https://www.cnblogs.com/robot/p/2208058.html
Copyright © 2011-2022 走看看