模拟Google全世界地球日的Doodle

模拟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();    })();

?这次花了一个半小时。

?