简略模拟Google的大马跑啊跑的Doodle _Web前端

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

1 楼 cheney_love 2012-04-10

LZ 自己做的图?

2 楼 lagunicage 2012-04-10

关键是css会哈，强人啊。楼主的名字很COOL

3 楼 kingcs 2012-04-10

好强啊

4 楼 carlzhao531 2012-04-11

好强啊...膜拜~

5 楼 BuN_Ny 2012-04-11

cheney_love 写道

LZ 自己做的图?

6 楼 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';偏移量
再次汗~
考虑的东西蛮多的

7 楼 zhengjie_dna 2012-04-11

写的不错！！！

8 楼 northc 2012-04-13

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

9 楼 johnnycmj 2012-05-10

膜拜啊....

10 楼 liuzhiqiangruc 2012-05-27

主要是因为楼主是女的，比较佩服