不過還是來騙一下文章好了
先來解釋一下坎尼的作法
做一頁要取資料的頁面,再用 javascript 的非同步發送機制取得資料
跑馬燈的畫面配置:要放訊息的 div * 1
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqlfj_q0GkVW0V-8fqvMoIjlX0Qu1cI-WObEs93Kxt1eEhkVrDeoToc91T4tuAv9UNtzUcbwAVgIy3YubzOOfMj9Gwq7QdrN_WgDslpdlSYrjX8SSrce2C7babCEK-B4dY9y4R0wz5riRa/s400/dymNews4.png)
取資料的畫面配置:把預設的 < ! DOCTYPE 以下的 code 清掉
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS_tTJqPMC4uhhg82cAeuQyZoRe01E1zU0u0b9uOjGo79NDGoFitD_20N7kuJG80XJfYsthIoBwpwL6OKA8AJ2U6Xr7cAP5fNMUsnOT4GvgGakstqDOnPrBlOt3QbyaGj0vTeFdJwM4iGW/s400/dymNews5.png)
首先是第一個範例:跑馬燈型
在取資料頁面的 Page_Init 事件,加入取得最新消息資料的程式碼
將抓出來的最新消息資料組成 html 跑馬燈指令
最後用 Response.Write 的方式輸出
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3iCs0cDNPEyre_JhIoaXXnmPTBOkJSoYzLOMOpXAJP7m_cEVuhOZfTiLzvkCN-mQ9NdpGczOKX6pHsxSiSzHSe8cLH8mCpio82PzlDbqplDe6fKPCcn3CuWg9EC9RVps8qv-YQ4fCTINT/s400/dymNews6.png)
在要顯示消息的地方,加入下列的code
這地方要注意的是,要先引用 jQuery 套件
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZAYgIJusbJ7o6NH-R9AV1R-jeJg8-Lh2bl9jXpjNnTR27W9C62rl2islT-PSg-07-JjTF0PGHaopYqT4vduJvebLifZRTonjJB1CHFssBgm9LxXdJqBi4XftuHHCj3HLqkpeTkZdzmlKQ/s400/dymNews3.png)
利用 jQuery 提供的 .ajax 功能,呼叫取資料頁面
再將取得的資料放入畫面上的 div
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8Ifxvr2ba2KkN6e6v1eWR4479Jp34iB8MLKhTE9TpRZ4fXcvOniPxrG7gEK9StNjlleR5Lsuo_cp5uGr2RUO3lS0IkAx2yjqdzxcbH6amXUW5vKRHNq2T42EsV7AjEmAu4Mm92Qgm3lgl/s400/dymNews1.png)
執行時,時間一到系統就會自動去後端取資料 (下圖為執行畫面)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN-u3p5U6aX_seuKEdKXVMFfm21DMBkwCpSpYfd7jQ7ZSuzb-uk9iw0ISAWh32PLhb02l4jQ5DAMABkJI0NHrGpxP0sSoHIAHGQ6lH8o_aIOs_vMpHyPoslyYt-EJj8rgD5Y4U0KjGZtWR/s400/dymNews8.png)
第二個範例:動畫型
拜 jQuery 所賜,很多以前要寫很多 code 的動畫效果
現在只要短短的一兩行就可解決
後端取資料的 code 改成隨機取得一筆資料
並用 Response.Write 輸出到畫面上
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuh2_z3rp5Q9mK-r3yptYSgYmxlVgIojUJURuKBjYhewCT6KmuyaEOnNXnWg6t63ndAWQKzh-8LW4pwG0amHWeCWfZNKVTUs8sJV-3_ealPrde-BGLCBd9zR9iVtChBjLf1HfoaYUu5CAu/s400/dymNews7.png)
顯示的javacsript改成用 fadeIn 及 fadeOut 來達成淡出淡入效果
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVL6a3OIAFe4Yp7FG5eeMCGNsiJBjPOvus717JOicdMi6zdzDvAGZISkt8MmkFOo-026tlgo_hRMNoMQmXnvSUZx5RsjXmJNx1xSfIdR2SLedWzs-5N1hJSE2yprPR2P0Rj9kPaE4FcrVC/s400/dymNews2.png)
執行畫面
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_1Gol6qeKoqu-pFrgHosYQMFRqTdiRDF6briTDD2LlXweL_jH3xuKuG7QMy1sDWIBpnwyY2zJMX4A2hVTPeFe3nZq8P7jGtSbUEdJ-lf3-8B6AuGfroJapsA1xGZGN_qS-U1OPh1lfFNj/s400/dymNews9.png)
這兩個範例坎尼覺得用途不太一樣
跑馬燈主要是用來顯示新訊息
淡出淡入的動畫效果用來顯示廣告會比較好
最後是本次的範例檔 下載
2 則留言:
請問要用什么軟件製作?
hi asuka93,
實現這些作法不需要什麼軟件,不過妳要懂一點 javascript (本範例是用 jQuery 這個框架)
要懂一點伺服器語言 (.NET、Java、Php...)
最後是要懂一點 AJAX 的概念
大概這些就很足夠做出很酷炫的動態網頁
建議閱讀資料:
http://www.w3schools.com/js/default.asp
http://jquery.com/
http://zh.wikipedia.org/wiki/AJAX
http://msdn.microsoft.com/zh-tw/default.aspx
http://msdn.microsoft.com/zh-tw/default.aspx
張貼留言