自己模拟实现一下Google的赛马（摄影师）Doodle

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

我对这个doodle的实现比较感兴趣，下面做个实现小程序。用两幅图就可以模拟这个赛马动画，可以在这里看看演示：赛马动画演示。

你也可以把下面的代码自己运行下：

<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。