简单模拟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。

 

 

评论

8 楼 johnnycmj 2012-05-10  

膜拜啊....

7 楼 northc 2012-04-13  

20分钟  ..  没有那么深厚的功力  表示研究了很久.....

6 楼 zhengjie_dna 2012-04-11  

写的不错！！！

5 楼 cgret 2012-04-11  

汗，自己研究了两个小时左右
首先是样式的编写
然后拆分js脚本，将主要跑马灯方法runFun()跟其他效果分开
单单这个runFun方法里面计算的方式就弄了好久
方法主体就设置图片的position属性
var d=c%67;是说明每个c的偏移量？
if(f<63){
  f=f*1.05;是说起始增量吗,当增量速度达到63之后不再增加
}else if(d>0&&d<4){//当增量率达到63的峰值时，强制为图片滚动，能够展示出动画效果，如果此处去掉，会有种串屏的感觉。。。
  f=67;//增量率强制设定为格子偏移
  c=c-d;//把每个格子更正为0;
}
c=(c+f)%804;//分以上两种方式去滚动
horse.style.backgroundPosition=-c+'px';偏移量
再次汗~
考虑的东西蛮多的

4 楼 BuN_Ny 2012-04-11  

cheney_love 写道

LZ 自己做的图?

3 楼 carlzhao531 2012-04-11  

好强啊...膜拜~

2 楼 kingcs 2012-04-10  

好强啊  

1 楼 cheney_love 2012-04-10  

LZ 自己做的图?