自己模拟实现一下Google的赛马Doodle
今天的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的更多相关文章
- Android单元测试与模拟测试详解
测试与基本规范 为什么需要测试? 为了稳定性,能够明确的了解是否正确的完成开发. 更加易于维护,能够在修改代码后保证功能不被破坏. 集成一些工具,规范开发规范,使得代码更加稳定( 如通过 phabri ...
- 不装逼地说,在 Google 到底能学到啥?
不装逼地说,在 Google 到底能学到啥? 2017-03-17 PHP开发者 (点击上方蓝字,快速关注我们) 本文转自公众号「半轻人」(ID:ban-qing-ren),伯乐在线/PHP开发者已获 ...
- web调试工具-firebug
Firebug是网页浏览器firefox下面的一款开发类插件.它集HTML查看和编辑,js控制台,网络状况监视器于一体,是开发js,css,HTML:和Ajax的得力助手 (自己整理的,有错误的话见谅 ...
- PHP开发搜索引擎技术全解析
谈到网页搜索引擎时,很多人都会想到雅虎.的确,雅虎开创了一个互联网络的搜索时代.然而,雅虎目前用于搜索网页的技术却并非该公司原先自己开发的.2000年8月,雅虎采用了Google这家由斯坦福大学学生创 ...
- Java单元测试框架 JUnit
Java单元测试框架 JUnit JUnit是一个Java语言的单元测试框架.它由Kent Beck和Erich Gamma建立,逐渐成为源于KentBeck的sUnit的xUnit家族中为最成功的一 ...
- 微软、谷歌、亚马逊、Facebook等硅谷大厂91个开源软件盘点(附下载地址)
开源软件中有大量专家构建的代码,大大节省了开发人员的时间和成本,热衷于开源的大厂们总是能够带给我们新的惊喜.2016年9月GitHub报告显示,GitHub已经有超过 520 万的用户和超 30 万的 ...
- HTML主体标签
HTML标签 在HTML结构代码中可以看到非常多的<>,这就是html的标签.整块html代码几乎就是由各种各样的标签与标签内容构成,每一个标签对应一个网页上的一个小模块,如一段文字1,一 ...
- Google赛马问题
http://coolshell.cn/articles/1202.html 据说,这是Google的面试题.面试题目如下: 一共有25匹马,有一个赛场,赛场有5个赛道,就是说最多同时可以有5匹马一起 ...
- 2016C#模拟谷歌Google登陆Gmail&Youtube小案例
之所以写这个,是因为本来想写一个Youtube刷评论的工具,把登录做出来了,后面就没继续做下去. 涉及到基本的HttpWatch的应用以及Fiddler的应用(Fd主要用来排查问题,通过对比 浏览器和 ...
随机推荐
- 机器学习基础之knn的简单例子
knn算法是人工智能的基本算法,类似于语言中的"hello world!",python中的机器学习核心模块:Scikit-Learn Scikit-learn(sklearn)模 ...
- py3.7.1下pyinstaller 的安装及打包 坑
实在无语了,写了个小程序,用pyinstaller打包,运行就出现这个pip install pywin32-ctypes.明明全部都已经安装了啊. 解决办法: 不要在工程设置里安装pyinstall ...
- linux实现DNS轮询实现负载平衡
DNS 轮询机制会受到多方面的影响,如:A记录的TTL时间长短的影响:别的 DNS 服务器 Cache 的影响:windows 客户端也有一个DNS Cache.这些都会影响 DNS 轮询的效果.因此 ...
- Yearning和inception搭建MySQL审核平台
前言 采用开源Yearning和inception开源软件,搭建用于MYSQL审核及线上MYSQL语句更新的审核平台. 功能说明 Yearning: 基于Vue.js与Django的整套mysql-s ...
- stm32--FatFs移植(SPIFlash)
前言 硬件: 单片机:stm32f072CB,sram大小16k.(其他单片机只要sram>8k即可通用) SPIFlash:W25Q128FV,16Mbyte,单次擦除最小4k. 程序使用Ke ...
- 洛谷P2307 迷宫
怎么又是一道叫迷宫的题呀QWQ 题目链接 这道题主要是对并查集的考察,需要注意的坑点在于有可能存在的不止一个联通块. 我们只需要对输入的两个数据进行判断,如果在一个集合中证明有多条路则输出0,如果不在 ...
- Qt Qwdget 汽车仪表知识点拆解1 速度表示
先贴上效果图,注意,没有写逻辑,所以这些都是乱动的 这里线主要说一下中间显示速度的显示制作的方式,在这里,自己专门写了一个数字的仪表 考虑的一般的汽车是没有办法把瞬时速度提升到四位数的,所以我这里就放 ...
- (原)自定义资源预览工具:DZAssetPreviewPlugin(1)
@author: 白袍小道 转载请说明,谢谢 题记 后续工具制作单独作为一本(小道用的是OneNote,这样发布简单点.*--*) 总计放到写完后. 目的 1.快速预览资源(因为大部分 ...
- mysql insert into select 语法
Insert into Table2(field1,field2,...) select value1,value2,... from Table1 这样就对了
- Python3 初识Python
一 Python简介 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC ...