码迷,mamicode.com
首页 > 其他好文 > 详细

自己模拟实现一下Google的赛马Doodle

时间:2014-10-11 18:27:26      阅读:230      评论:0      收藏:0      [点我收藏+]

标签:style   http   io   os   使用   ar   java   sp   div   

今天的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

标签:style   http   io   os   使用   ar   java   sp   div   

原文地址:http://www.cnblogs.com/xiaoyang002/p/4019042.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!