简单模拟Google的大马跑啊跑的Doodle

Google今天的Doodle挺好玩的，主要是图做的给力呀！照着做了一个，没像Google那样做很细致的判断及比较复杂的浏览器兼容性处理，但是效果是完全有的！

 

DOM灰常简单：

 

<div id="horse">
  <div id="run"></div>
  <div id="bg"></div>
</div>

 JavaScript也很简单：

 

(function(){
  var a, e = c = 0, f = 1, stop = false;
  var horse = document.getElementById('horse');
  var run = document.getElementById('run');
  var runFn = function(){
    var d = c % 67;
    if(f < 63){
      f = f*1.05;
    }else if(d>0 && d<4){
      f = 67;
      c = c-d;
    }
    c = (c+f) % 804;
    horse.style.backgroundPosition = -c+"px 0";
    if(e<67){
      e = e+f;
      run.style.backgroundPosition = horse.style.backgroundPosition;
    }
    a = window.setTimeout(runFn, 41);
  };
		  
  horse.onmousedown = function(){
    run.style.marginTop = '2px';
  };
  horse.onmouseup = horse.onmouseout = function(){
    run.style.marginTop = '';
  };
		  
  horse.onclick = function(){
    if(!stop){
      runFn();
    }else{
      window.clearTimeout(a);
      window.location = window.location;
    }
    stop = !stop;
  };
})();

 好像没什么好特别解释的，这种简单的实现，20分钟可以搞定啊~

 

 

 

 

==============================================================

还真有人研究。。。荣幸啊。。。

图的width是804，共12个图， 804/12=67,

另外人的视觉暂留是0.1~0.4s,一般动画、电影是二十四分之一秒一帧,也就是41ms。