不知道有沒有人發現上面有時候會有一隻飛機從右邊往左邊飛過去XD
這是我突然覺得上面標題的地方好像有點空
好像該加些什麼喔
所以想說加台會飛的飛機好了 哈哈
他有一定的機率會出現 所以不是每次都會出現囉
如果不想瞭解運作原理的話 可以直接下載檔案就好~
這是檔案連結
將plane這個資料夾放在跟網頁同一層的目錄
並在該網頁的<body></body>之中的任何地方加上一行
建議是頁面的最後 也就是</body>的上面一行
<script src="plane/plane.js" type="text/javascript"></script>
就有飛機飛囉~
(如果網頁有作網址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
便完成了
最後一點就是讓飛機動起來～
先將這個<img>的position設定為absolute
並設定好top跟left
再利用setTimeout()改變他的left
結果就會很像在動囉~
如果要看完整的js檔 可以在該下載檔案裡面看到喔
這個例子沒有用到javascript library(如jQuery)
所以碼不是太簡潔
如果利用jQuery的話 會更簡單
下次再試試看XD
真的有紙飛機嗎?…XD
沒有紙飛機@@a
我那時候在找紙飛機的圖找不到XD
不然用紙飛機好像比較酷~
弄個熱氣球飄過去也不賴…
hsin弄個留言的位置吧，這樣來你家打招呼的人可以有簽名處XD
我也一直在找好看的圖
熱氣球好像不賴
有找到的話再來放XD
留言的位置 我好懶XD