|
創(chuàng)建 Ajax 幻燈片放映
最后一步是創(chuàng)建 Ajax 版本的幻燈片放映。這意味著要使用從 slides.php 服務(wù)獲得的內(nèi)容代替硬編碼的圖像列表。
Ajax 版本的幻燈片放映代碼如 清單 8 所示。
清單 8. Ajax 幻燈片代碼
<html>
<head>
<style type="text/css">
body { background: black; margin: 0px; padding: 0px; }
</style>
<script src="KenBurnsAnimations.js">
</script>
<script src="Animation.js">
</script>
<script src="ImageInfo.js">
</script>
<script src="SlideShow.js">
</script>
</head>
<body>
<div style="position:relative;width:100%;height:100%;overflow:hidden;"
id="imgContainer">
</div>
<script>
function processReqChange()
{
if (req.readyState == 4 && req.status == 200
&& req.responseXML != null)
{
var items = [];
var nl = req.responseXML.getElementsByTagName( 'slide' );
for( var i = 0; i < nl.length; i++ )
{
var nli = nl.item( i );
var src = nli.getAttribute( 'src' ).toString();
var width = parseInt( nli.getAttribute( 'width' ).toString() );
var height = parseInt( nli.getAttribute( 'height' ).toString() );
items.push( { src: src, width: width, height: height } );
}
load_slides( items );
start_slides();
}
}
function loadXMLDoc( url )
{
req = false;
if(window.XMLHttpRequest) {
try {
req = new XMLHttpRequest();
} catch(e) {
req = false;
}
}
else if(window.ActiveXObject)
{
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
req = false;
}
}
}
if(req) {
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send("");
}
}
loadXMLDoc( "http://localhost/kenburns/slides.php" );
</script>
</body>
</html>
我把 start_slides 和 load_slides 函數(shù)移到了外部 JavaScript 文件 SlidesShow.js 中，以免該文件過大。代碼的其他部分和 清單 2 中的 Ajax 測試頁類似。只不過這些代碼沒有插入警告窗口，也沒有把數(shù)據(jù)插入一個表格，而是創(chuàng)建了一個幻燈片信息數(shù)組，然后調(diào)用 load_slides 和 start_slides。
如此而已！這樣就可以使用 Ken Burns Effect 動態(tài)地移動、縮放和漸變圖像的 Ajax 幻燈片。
結(jié)束語
本文中盡可能地使用了面向?qū)ο蟮?JavaScript 代碼。JavaScript 是一種完全面向?qū)ο蟮恼Z言，雖然可能不使用 class 和 interface 關(guān)鍵字，但仍然可以保持代碼的清晰性和可維護性。如果可以的話，我建議您使用 Ajax 框架。這里沒有使用框架是因為我想介紹一種輕型的 Ajax 解決方案。但現(xiàn)在的框架（有很多）更容易編寫更具可移植性的 Ajax 和 DHTML 代碼。
除了本文中介紹的之外，關(guān)于 Ajax 幻燈片我還有以下建議：
1、使用基于時間的動畫。用 setInterval 代碼實現(xiàn)基于步驟的動畫看起來有些抖動。
2、對可視化元素用 DHTML 建立代碼原型，然后再增加 Ajax 內(nèi)容。這意味著可以離線編寫 DHTML 代碼。
3、將連接到服務(wù)器的 Ajax 代碼和呈現(xiàn)數(shù)據(jù)的 DHTML 用戶界面（UI）組件分開。這樣即便不使用 Ajax 獲取數(shù)據(jù)，也仍然能夠使用那些界面組件。
4、使用 createElement 和 appendChild 函數(shù)而不是 innerHTML 來改變頁面內(nèi)容。
5、一定要針對所有希望支持的瀏覽器檢查客戶端代碼。此外，還要記錄下您所遇到的兼容性問題以及解決這些問題的方法。盡量將固定的客戶端代碼封裝成可重用的 JavaScript helper 函數(shù)和類。
6、對于復(fù)雜的界面（包括多重動畫），編碼之前應(yīng)首先使用情節(jié)串連板與客戶一起確定他們所需要的效果。情節(jié)串連板是代碼規(guī)范的動畫版本。JavaScript 動畫寫起來很快，因此在編碼之前明確目標(biāo)是值得的，否則可能走不少冤枉路。
7、從職業(yè)的角度來看，僅關(guān)注數(shù)據(jù)庫和業(yè)務(wù)邏輯的 Web V1.0 時代的 “后端工程師”，在 Web V2.0 時代中作用是有限的。必須認(rèn)識到并非所有對服務(wù)器的請求都要借助于 HTML。Ajax 和 DHTML 對那些愿意花錢提高其技能的真正的工程師來說是現(xiàn)實的工具。前端不僅僅是設(shè)計人員的前端。
過去，通常需要 Flash 或者類似的應(yīng)用程序才能實現(xiàn)本文這樣的動態(tài)幻燈片放映。現(xiàn)代化的瀏覽器為 DHTML 提供了不透明性這類豐富的特效支持（Internet Explorer 甚至支持旋轉(zhuǎn)、模糊等），再加上 Ajax，僅僅在瀏覽器中就能實現(xiàn)令人眩目的效果。這意味著客戶不再需要下載奇怪的擴展或者運行有可能不安全的應(yīng)用程序。他們可能偶爾看到了您的網(wǎng)頁，令人震驚的圖像效果會讓他們經(jīng)常來光顧。
下載：Code and file samples
出處：IBM developerWorks
責(zé)任編輯：moby
上一頁 用DHTML與XML制作Ajax幻燈片 [6] 下一頁
◎進入論壇網(wǎng)絡(luò)編程版塊參加討論
|
第 1 頁 
第 7 頁 用DHTML與XML制作Ajax幻燈片 [7]
