|
實現(xiàn)非 Ajax DHTML
有了這些基礎類之后，就可以實現(xiàn)幻燈片的非 Ajax DHTML 版本來進行測試了，如 清單 7 所示。
清單 7. 非 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>
var g_animationManager = new AnimationManager( 50 );
var g_current_slide = 0;
var g_slides = [];
var g_directions = [
{ sx: [ -30, 0 ], ex: [ 5, 40 ], sy: [ -30, 0 ], ey: [ 5, 40 ] }, // nw -> se
{ sx: [ 5, 40 ], ex: [ -30, 0 ], sy: [ 5, 40 ], ey: [ -30, 0 ] }, // ne -> sw
{ sx: [ 5, 40 ], ex: [ -30, 0 ], sy: [ 5, 40 ], ey: [ -30, 0 ] }, // se -> nw
{ sx: [ -30, 0 ], ex: [ 5, 40 ], sy: [ 5, 40 ], ey: [ -30, 0 ] } // sw -> ne
];
g_animationManager.on_finished = function()
{
g_current_slide++;
if ( g_current_slide >= g_slides.length )
g_current_slide = 0;
g_slides[ g_current_slide ].start();
}
function rnd( start, end )
{
return ( Math.random() * ( end - start ) ) + start;
}
function load_slides( images )
{
var ic = document.getElementById( 'imgContainer' );
for( var i in images )
{
var img = images[i];
var imgObj = document.createElement( 'img' );
imgObj.style.position = 'absolute';
imgObj.style.left = '0px';
imgObj.style.top = '0px';
imgObj.style.visibility = 'hidden';
ic.appendChild( imgObj );
var ii = new ImageInfo( img.src, img.width, img.height, imgObj );
var szoom = rnd( 50, 100 );
var ezoom = rnd( 70, 120 );
var d = parseInt( ( Math.random() * g_directions.length ).toString() );
var di = g_directions[ d ];
var sx = rnd( di.sx[0], di.sx[1] );
var sy = rnd( di.sy[0], di.sy[1] );
var ex = rnd( di.ex[0], di.ex[1] );
var ey = rnd( di.ey[0], di.ey[1] );
g_slides.push(
new Animation( g_animationManager, ii, 10,
[ new KenBurnsZoomer( ii, szoom, ezoom, ic.clientWidth, ic.clientHeight ),
new KenBurnsMover( ii, sx, sy, ex, ey, ic.clientWidth, ic.clientHeight ),
new KenBurnsFader( ii, 30 ) ] )
);
}
}
function start_slides()
{
g_slides[ g_current_slide ].start();
}
</script>
</head>
<body>
<div style="position:relative;width:100%;height:100%;overflow:hidden;"
id="imgContainer">
</div>
<script>
var images = [
{ src: 'images/megan1_875_700.jpg', width: 875, height: 700 },
{ src: 'images/oso1_875_700.jpg', width: 875, height: 700 },
{ src: 'images/oso2_873_700.jpg', width: 873, height: 700 }
];
load_slides( images );
start_slides();
</script>
</body>
</html>
不用電影是很難說明上述代碼在瀏覽器中的運行結果的。因此我抓了一個快照，如 圖 6 所示。
圖 6. 幻燈片放映的快照
該頁面首先通過 <script> 標記的 src 屬性引入基類。安裝這些類之后，增加兩個函數(shù)將整個機制組織到一起：load_slides 和 start_slides。load_slides 函數(shù)接收一個數(shù)組，包括圖像的 src、width 和 height，然后創(chuàng)建 <image> 標記和動畫。start_slides 函數(shù)從第一項開始啟動幻燈片放映。
附加在動畫管理器上的另一個方法 on_finished 在動畫完成時調用。我使用該通知移動到下一張幻燈片，如果已經(jīng)完成所有幻燈片的動畫，則回到列表中的第一張。
再回到 load_slides，要注意它引用了一個名為 g_directions 的數(shù)組。該數(shù)組包含一些隨機范圍，幻燈片加載程序用它來規(guī)定圖片移動的起點和終點。最理想的效果是從一個角到另一個角。從注釋中可以看到，這些值規(guī)定幻燈片的移動范圍為東北、東南、西北和西南的任意組合。最后的 <script> 標記定義了一個圖像數(shù)組，然后使用 load_slides 和 start_slides 函數(shù)啟動幻燈片放映。
出處：IBM developerWorks
責任編輯：moby
上一頁 用DHTML與XML制作Ajax幻燈片 [5] 下一頁 用DHTML與XML制作Ajax幻燈片 [7]
◎進入論壇網(wǎng)絡編程版塊參加討論
|
第 1 頁 
第 6 頁 用DHTML與XML制作Ajax幻燈片 [6]
