前幾天在網路上閒晃時....看到這個特效....


個人覺得還蠻好玩的，所以就找了一下怎麼弄......


主要的概念就是
1.  在網頁載入的最前面放上一段程式碼載入動畫
2.  中間開始載入一些自已網誌上雜七雜八的東西
3.  再網誌的最後，加上關閉動畫的程式碼就行了

以我的部落格來說
我是將第一段程式碼加在 網誌管理 -> 網誌設定 -> 網誌描述 裡面
這樣會在一開始的時候就啟動 網頁載入 的動畫....

程式碼如下：
<div id="divLoading" style="color:red;position:absolute;top:-4px;left:250px;width:250px;height:50px;z-order=0">
<img src="動畫小圖的網址" style="vertical-align:middle;padding:6px"/>
網頁載入中，請稍候...
</div>

其中紅色粗體部份，可自行配合自己的網誌來做設定
至於如何設定，就請參照css的寫法

之後到 版面管理 -> 版面設定 裡的最後一個自訂欄位加上 關閉 動畫的程式碼
程式碼如下：
<script>
  function init( ) {
    _oTag = document.getElementById("divLoading");
    _oTag.style.display = "none";  //隱藏動畫
  }

  if (window.attachEvent) {
    window.attachEvent('onload', init);
  } else {
    window.addEventListener('load', init, false);
  }
</script>

這樣就完成啦....

如果想要動畫的小圖，可以去 ajaxload 這個網站上，可以製做這種動畫小圖....
或是在goolge上面尋找，應該也可以找到不少....
arrow
arrow
    全站熱搜

    brian6724 發表在 痞客邦 留言(2) 人氣()

    E-mail轉寄