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
  • 相关阅读:
    eval是只读数据，bind是可更新的．
    数据库中的html在页面上显示
    kindeditor asp.net 模板问题 clientidmode="Static"
    我对if(!this.IsPostBack)的理解
    asp.net正则表达式
    由于扩展配置问题而无法提供您请求的页面。如果该页面是脚本,请添加处理程序。
    IIS7错误:不能在此路径中使用此配置节。如果在父级别上锁定了该节，便会出现这种情况。锁定是默认设置的(overrideModeDefault="Deny")...
    Microsoft.AspNet.FriendlyUrls发布到IIS后404报错的解决方案
    jQuery 绑定事件
    jQuery 位置
  • 原文地址：https://www.cnblogs.com/qguohog/p/Sallay.html
Copyright © 2011-2022 走看看