模拟Google世界地球日的Doodle

直接上代码吧。

 

CSS部分：

 

    #doodle {
      position: relative;
      margin-top: 35px;
      height: 182px;
      width: 468px; 
      overflow: hidden;
    }
    #doodle img{
      position:absolute;
      border:none;
      height:364px;
      left:0;
      top:0;
      width:468px
    }

 

HTML部分：

 

    <div id="doodle" title="世界地球日">
      <img src="image/a.jpg" id="_a">
      <img src="image/b.jpg" id="_b">
      <img src="image/b.jpg" id="_c">
    </div>

 

JavaScript部分：

 

    (function() {
        var divMain, imgA, imgB, imgC,
            timer={}, topMargin,  flag,
            
        //设置透明度
        setOpacityFn = function(dom, val) {
          if (dom) {
            dom.style.display = val > 0 ? 'block' : 'none';
            dom.style.filter = val < 100 ? 'alpha(opacity:' + val + ')' : ''; //IE
            val = (val < 100 ? val : 100) / 100;
            dom.style.opacity = val;  //W3C
            dom.style.MozOpacity = val; //Fx
          }
        },
        
        //清除定时器
        clearTimerFn = function() {
          window.clearTimeout(timer.show);
          window.clearTimeout(timer.grow);
        },
        
        //入口函数
        mainFn = function() {
          clearTimerFn();
          //初始化变量，获得dom引用等
          divMain = document.getElementById('doodle');
          imgA = document.getElementById('_a');
          imgB = document.getElementById('_b');
          imgC = document.getElementById('_c');
          topMargin = 0;
          flag = !1;
          if (divMain && imgA && imgB && imgC) { //占位用img
            var img = document.createElement('img');
            img.style.visibility = 'hidden';
            img.onload = imgOnloadFn;
            img.src = 'image/b.jpg';
            divMain.appendChild(img);  //执行onload事件
          }
        }, 
        imgOnloadFn = function() {
          clearTimerFn();
          imgB.style.height = imgC.style.height = '2912px';
          imgB.src = imgC.src = 'image/b.jpg';
          setOpacityFn(imgB, 0);
          setOpacityFn(imgC, 0);
          imgB.style.display = imgC.style.display = '';
          flowerGrowFn();
        },
        
        //花朵成长过程的每个图都是渐渐展现
        flowerShowFn = function(dom, val) {
          if (dom) {
            setOpacityFn(dom, val);
            if (val < 99)
              //每50ms透明度增加11，半秒内完全显示出来
              timer.show = window.setTimeout(function() {
                flowerShowFn(dom, val + 11);
              }, 50);
          }
        }, 
        //花朵生长过程
        flowerGrowFn = function() {
          var a = flag ? imgB : imgC, 
              b = flag ? imgC : imgB;
          a.style.zIndex = 4;
          b.style.zIndex = 3;
          window.clearTimeout(timer.show);
          flowerShowFn(a, 0);
          a.style.top = -topMargin + 'px';
          topMargin = Math.floor(topMargin + 182);
          //生长过程计时器
          timer.gow = topMargin < 2912 
                   ? window.setTimeout(flowerGrowFn, 500) 
                   : window.setTimeout(flowerFullbloomFn, 500);
          flag = !flag;
        }, 
        
        //完全开放,哦也~
        flowerFullbloomFn = function() {
          window.clearTimeout(timer.show);
          imgA.style.top = '-182px';
          imgA.style.zIndex = 5;
          flowerShowFn(imgA, 0);
        };
        
        mainFn();
    })();

 这次花了一个半小时。