造飛機~

2009-06-08

不知道有沒有人發現上面有時候會有一隻飛機從右邊往左邊飛過去XD

[UPDATE: 20130501]
隨著更新wordpress跟theme
這隻js已經從頁面上拿掉囉
[UPDATE END]

這是我突然覺得上面標題的地方好像有點空
好像該加些什麼喔
所以想說加台會飛的飛機好了 哈哈
他有一定的機率會出現 所以不是每次都會出現囉
如果不想瞭解運作原理的話 可以直接下載檔案就好~
這是檔案連結
將plane這個資料夾放在跟網頁同一層的目錄
並在該網頁的之中的任何地方加上一行
建議是頁面的最後 也就是的上面一行


就有飛機飛囉~
(如果網頁有作網址rewrite 就可能要把此js檔的路徑跟js檔中圖檔的路徑改成絕對路徑才會正常動作喔)

有時候會卡卡的 應該就是. . .瀏覽器的關係
用google chrome看會飛很快XD

========分隔線===========分隔線========分隔線=============

以下是有用到的相關原理
一共需要4種東西

首先是要加入load事件
可以參考這個

var oldOnload=window.onload||function(){};
window.onload=function(){
oldOnload();
//do something
}

這樣如果頁面上已經有其他onload的函式 就不會被蓋掉了

再來呢
因為要讓飛機從最右邊開始飛
所以要取得可視螢幕的寬度大小
可以參考這裡
而需要這段程式也是因為IE比較XXX的關係
所以要判斷是不是IE

function getSize(){
  var myWidth=0;
  if(typeof(window.innerWidth)=='number'){//Non-IE
    myWidth=window.innerWidth;
  }else if(document.documentElement && (document.documentElement.clientWidth||document.documentElement.clientHeight)){//IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
  }else if(document.body && (document.body.clientWidth||document.body.clientHeight)){//IE 4 compatible
    myWidth = document.body.clientWidth;
  }
  return myWidth;
}

第三點呢
則是只有當圖片是png才需要的
因為IE6之前的瀏覽器 不支援透明的png圖片(會顯示一塊灰色的)
所以如果當圖片是png的時候
需要用到一點css hack
下面是函式中的片段

var img_src="plane/plane.png";
var img2_src="plane/transparent.gif";
var img_w=45;
var img_h=45;
var img=document.createElement("img");
if(navigator.appName=="Microsoft Internet Explorer"){
	img.src=img2_src;
	img.width=img_w;
	img.height=img_h;
	img.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+img_src+", sizingmethod=scale);";
}
else{
	img.src=img_src;
}

如果為IE的話 則是先將原本的圖片替換成一張透明的圖片
並設定這張透明的圖片寬度高度 使寬高跟原本的圖片一樣
再加上IE特有的filter
便完成了

最後一點就是讓飛機動起來~
先將這個的position設定為absolute
並設定好top跟left
再利用setTimeout()改變他的left
結果就會很像在動囉~

如果要看完整的js檔 可以在該下載檔案裡面看到喔

這個例子沒有用到javascript library(如jQuery)
所以碼不是太簡潔
如果利用jQuery的話 會更簡單
下次再試試看XD