zoukankan      html  css  js  c++  java

  • Google首页google Bar的跳动效果简易实现

         好久没写文章了，过完春节人也变得更懒惰了。还是年前同事提起google首页下面几个小点点跳动的动画怎么实现的问题，拖到现在才整理一下。

         以前还没怎么在意google下面的这个googleBar，以为只是几个好玩的动画图片而已，但仔细看来，竟然这些玄妙的动画效果仅仅来源于一张图片：

     

        奥妙之处就在于javascript和style的混合运用。通常，我们在HTML中可以用background-image给一个元素设置一个背景图片，并且用background-repeat来指定北京图是否平铺或者拉伸等，但我们也可以用background-position来指定只显示背景图中指定区域，即不将整个图片做北京，而取图片的一部分作为背景。googleBar里就用了很多类似于这样的style设置：  

    Code

        Google的源代码很冗长，且经过了代码压缩和混淆处理，看起来很吃力。不过，我还是耐心的看完了它的js代码，可以看得出来它做了很好的封装。为了能更好的直白的理解其实现原理，我写了一个简易的程序来实现它，我写得确实非常简易和原始，几乎没有任何封装，而且将google里自动生成组装html部分我直接将html写出来了。不过，这个代码还是有点问题，特别是从一个点直接移动到另一个点时就不能分别处理各自的动画。

    Code
  • 相关阅读:
    java往文本文件中写入信息并修改
    idea中写servlet时报错--关于405错误
    关于引入js文件乱码的问题
    关于HTML的引入CSS文件问题
    后缀算法
    vim中 E212:无法打开并写入文件的解决办法
    Restful风格API
    Restful概念
    Andriod实现推送的解决方案(转)
    IOS系统推送原理
  • 原文地址：https://www.cnblogs.com/qguohog/p/Sallay.html
Copyright © 2011-2022 走看看