今天的Google Doodle是个动态的,是一个骑马的动态Doodle,是谷歌纪念英国实验摄影师埃德沃德·迈布里奇182周年诞辰,埃德沃德·迈布里奇是运动摄影的开创者,所以谷歌涂鸦以一个运动的摄影作为背景创作的。

埃德沃德·迈布里奇(Eadweard J. Muybridge,1830年4月9日-1904年5月8日),英国摄影师,他因使用多个相机拍摄运动的物体而著名,他发明的“动物实验镜”(Zoopraxiscope)是一种可以播放运动图像的投影机,将连续图像绘制在一块玻璃圆盘的边缘,随着玻璃的旋转,将影像投射出去,这样就使这些影象显得像在运动。

我对这个doodle的实现比较感兴趣,下面做个实现小程序。只用一幅图的时候效果是这样的(稍等下,运动缓冲):

当两幅图同时使用的使用,就可以达到连贯的赛马效果了。

测试代码如下

01 var scrollBox = document.getElementById("classicScrollBox");
02 var num_record = 0;//起止位置计算
03 var num_motion = 1000;//动画执行间隔
04 var num_motionTime = 5;//动画缓动系数
05 window.onload = function(){
06     function scrolls(){
07         scrollBox.style.left = (parseInt(scrollBox.style.left)-67) +'px';
08         num_record += 67;
09         if(num_record == 804){
10             scrollBox.style.left = 0 + 'px';
11             num_record = 0;
12         }
13         num_motionTime = Math.ceil(num_motion/100);
14         if (num_motionTime == 0) {
15             num_motionTime = 1;
16         }
17         if (num_motion != 40) {
18             num_motion -= 10*num_motionTime;
19         }
20         setTimeout(scrolls,num_motion);
21     }
22     setTimeout(scrolls,num_motion);
23 }

这次的代码不是很复杂,主要是使用css的背景属性,使用JavaScript计时器来改变时间,调整图片背景的位置达到动画效果。

自己模拟实现一下Google的赛马Doodle的更多相关文章

  1. Android单元测试与模拟测试详解

    测试与基本规范 为什么需要测试? 为了稳定性,能够明确的了解是否正确的完成开发. 更加易于维护,能够在修改代码后保证功能不被破坏. 集成一些工具,规范开发规范,使得代码更加稳定( 如通过 phabri ...

  2. 不装逼地说,在 Google 到底能学到啥?

    不装逼地说,在 Google 到底能学到啥? 2017-03-17 PHP开发者 (点击上方蓝字,快速关注我们) 本文转自公众号「半轻人」(ID:ban-qing-ren),伯乐在线/PHP开发者已获 ...

  3. web调试工具-firebug

    Firebug是网页浏览器firefox下面的一款开发类插件.它集HTML查看和编辑,js控制台,网络状况监视器于一体,是开发js,css,HTML:和Ajax的得力助手 (自己整理的,有错误的话见谅 ...

  4. PHP开发搜索引擎技术全解析

    谈到网页搜索引擎时,很多人都会想到雅虎.的确,雅虎开创了一个互联网络的搜索时代.然而,雅虎目前用于搜索网页的技术却并非该公司原先自己开发的.2000年8月,雅虎采用了Google这家由斯坦福大学学生创 ...

  5. Java单元测试框架 JUnit

    Java单元测试框架 JUnit JUnit是一个Java语言的单元测试框架.它由Kent Beck和Erich Gamma建立,逐渐成为源于KentBeck的sUnit的xUnit家族中为最成功的一 ...

  6. 微软、谷歌、亚马逊、Facebook等硅谷大厂91个开源软件盘点(附下载地址)

    开源软件中有大量专家构建的代码,大大节省了开发人员的时间和成本,热衷于开源的大厂们总是能够带给我们新的惊喜.2016年9月GitHub报告显示,GitHub已经有超过 520 万的用户和超 30 万的 ...

  7. HTML主体标签

    HTML标签 在HTML结构代码中可以看到非常多的<>,这就是html的标签.整块html代码几乎就是由各种各样的标签与标签内容构成,每一个标签对应一个网页上的一个小模块,如一段文字1,一 ...

  8. Google赛马问题

    http://coolshell.cn/articles/1202.html 据说,这是Google的面试题.面试题目如下: 一共有25匹马,有一个赛场,赛场有5个赛道,就是说最多同时可以有5匹马一起 ...

  9. 2016C#模拟谷歌Google登陆Gmail&Youtube小案例

    之所以写这个,是因为本来想写一个Youtube刷评论的工具,把登录做出来了,后面就没继续做下去. 涉及到基本的HttpWatch的应用以及Fiddler的应用(Fd主要用来排查问题,通过对比 浏览器和 ...

随机推荐

  1. spring-boot整合ehcache实现缓存机制

    EhCache 是一个纯Java的进程内缓存框架,具有快速.精干等特点,是Hibernate中默认的CacheProvider. ehcache提供了多种缓存策略,主要分为内存和磁盘两级,所以无需担心 ...

  2. python 装饰器 (多个装饰器装饰一个函数---装饰器前套一个函数)

    #带参数的装饰器 #500个函数 # import time # FLAGE = False # def timmer_out(flag): # def timmer(func): # def inn ...

  3. 对URI的理解

    在了解RESTful api的设计规范的时候,遇到了一个问题,就是uri和url有什关系,有什么区别,所以就在这里记录一下. URI(Uniform Resource Identifier),统一资源 ...

  4. ruby Dir类

    类方法 1. Dir[pat]    Dir::glob( pat) 返回一个数组,包含与指定的通配符模式 pat 匹配的文件名: * - 匹配包含 null 字符串的任意字符串 ** - 递归地匹配 ...

  5. (数据科学学习手札22)主成分分析法在Python与R中的基本功能实现

    上一篇中我们详细介绍推导了主成分分析法的原理,并基于Python通过自编函数实现了挑选主成分的过程,而在Python与R中都有比较成熟的主成分分析函数,本篇我们就对这些方法进行介绍: R 在R的基础函 ...

  6. R语言绘图:在地图上绘制热力图

    使用ggplot2在地图上绘制热力图 ######*****绘制热力图代码*****####### interval <- seq(0, 150000, 25000)[-2] #设置价格区间 n ...

  7. xpath简单入门

    语法: 选取节点: 实例: (贴图转载自w3school) 补充: /a/@href        #获取a标签的href属性 当<div class="demo">& ...

  8. CentOS7安装Oracle 11gR2 图文详解

    注:Oracle11gR2 X64安装 一.环境准备 安装包: 1.VMware-workstation-full-11.1.0-2496824.exe 2.CentOS-7-x86_64-DVD-1 ...

  9. 浅谈 kubernetes service 那些事 (下篇)

    欢迎访问网易云社区,了解更多网易技术产品运营经验. 五.K8s 1.8 新特性--ipvs ipvs与iptables的性能差异 随着服务的数量增长,IPTables 规则则会成倍增长,这样带来的问题 ...

  10. 通过repcached实现memcached主从复制

    一.环境 服务器A:ubuntu server 12.04(192.168.1.111) 服务器B:ubuntu server 12.04 (47.50.13.111) 二.memcached安装 s ...