今天的Google Doodle是个动态的,是一个骑马的动态Doodle,是谷歌纪念英国实验摄影师埃德沃德·迈布里奇182周年诞辰,埃德沃德·迈布里奇是运动摄影的开创者,所以谷歌涂鸦以一个运动的摄影作为背景创作的。
我对这个doodle的实现比较感兴趣,下面做个实现小程序。用两幅图就可以模拟这个赛马动画,可以在这里看看演示:[url=http://www.nowamagic.net/librarys/veda/detail/1734]赛马动画演示[/url]。
你也可以把下面的代码自己运行下:
这次的代码不是很复杂,主要是使用css的背景属性,使用JavaScript计时器来改变时间,调整图片背景的位置达到动画效果。
Have fun。
我对这个doodle的实现比较感兴趣,下面做个实现小程序。用两幅图就可以模拟这个赛马动画,可以在这里看看演示:[url=http://www.nowamagic.net/librarys/veda/detail/1734]赛马动画演示[/url]。
你也可以把下面的代码自己运行下:
<style type="text/css">
.classicScrollBox{width:9000px; height:54px; position:absolute; left:0; }
.classicScrollBox img{width:804px; height:54px; float:left;}
.item1{width:804px; height:54px; overflow:hidden; position:relative;}
</style>
<div class = "item1">
<div id="classicScrollBox" class = "classicScrollBox">
<img src="http://www.google.com.hk/logos/2012/muybridge12-hp-f.jpg" alt="">
<img src="http://www.google.com.hk/logos/2012/muybridge12-hp-f.jpg" alt="">
</div>
</div>
<script type="text/javascript">
var scrollBox = document.getElementById("classicScrollBox");
var num_record = 0;//起止位置计算
var num_motion = 1000;//动画执行间隔
var num_motionTime = 5;//动画缓动系数
window.onload = function(){
function scrolls(){
scrollBox.style.left = (parseInt(scrollBox.style.left)-67) +'px';
num_record += 67;
if(num_record == 804){
scrollBox.style.left = 0 + 'px';
num_record = 0;
}
num_motionTime = Math.ceil(num_motion/100);
if (num_motionTime == 0) {
num_motionTime = 1;
}
if (num_motion != 40) {
num_motion -= 10*num_motionTime;
}
setTimeout(scrolls,num_motion);
}
setTimeout(scrolls,num_motion);
}
</script>
这次的代码不是很复杂,主要是使用css的背景属性,使用JavaScript计时器来改变时间,调整图片背景的位置达到动画效果。
Have fun。