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
  • 相关阅读:
    树莓派：2安装MySQL
    树莓派：1组装启动
    NLifeBill第六章月总额报表
    NLifeBill第五章修改页面
    NLifeBill第四章添加页面
    NLifeBill第三章Angularjs使用
    NLifeBill第二章日历显示
    NLifeBill第一章项目搭建
    『ORACLE』 SQL语句简单应用（二）（11g）
    『ORACLE』 SQL语句简单使用（一）（11g）
  • 原文地址：https://www.cnblogs.com/qguohog/p/Sallay.html
Copyright © 2011-2022 走看看