Pages

1

仿 google doodle - 世界地球日 Earth Day


點選上面這張圖片就可以看到效果~

這是 2012/4/22 的 google doodle：世界地球日 Earth Day，
如果是以前我應該會用 gif 或是 flash 來製作，
當然以身為多媒體人而言，
這個效果是多媒體幼稚園的入門等級，
但是身為程式幼稚園等級的我，
一定要拿出來練習一下...
主要的做法是設定 li 的背景和階層的設定，
然後再讓 li 一個個的消失就可以了，
如此一來就不用大費周章的把 flash 開起來，
產生一個 swf 還要用 object 給他包起來，
或是製作只有 256 色的 gif(檔案還可能比較大)

html 程式部分(非常簡單只有一點點字)

<body>
  <ul id="imgul"></ul>
</body>

css 程式部分

ul.#imgul,ul.#imgul .li{padding:0; margin:0; list-style:none;}
#imgul li{width:468px; height:182px; background:url(img/earthday12-hp-b.jpg); position:absolute; top:20px; left:20px; display:block;}

jqeury 程式部分

var x=-1;
  for(var i=0;i<16;i++){
    $("#imgul").append("<li></li>");
  }
  for(var i=0;i<16;i++){
    $("#imgul li:eq("+i+")").css({"background-position":"0 -"+i*182+"px","z-index":-i});
  }
imgshow();
function imgshow(){
  if(x<14){
  x=x+1;
  timer = setTimeout(function(){
    $("#imgul li:eq("+x+")").fadeOut(500);
      imgshow();
    },550);
  }
}

oxxo

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

1 則留言: