|
实现非 Ajax DHTML
有了这些基础类之后，就可以实现幻灯片的非 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 属性引入基类。安装这些类之后，增加两个函数将整个机制组织到一起：load_slides 和 start_slides。load_slides 函数接收一个数组，包括图像的 src、width 和 height，然后创建 <image> 标记和动画。start_slides 函数从第一项开始启动幻灯片放映。
附加在动画管理器上的另一个方法 on_finished 在动画完成时调用。我使用该通知移动到下一张幻灯片，如果已经完成所有幻灯片的动画，则回到列表中的第一张。
再回到 load_slides，要注意它引用了一个名为 g_directions 的数组。该数组包含一些随机范围，幻灯片加载程序用它来规定图片移动的起点和终点。最理想的效果是从一个角到另一个角。从注释中可以看到，这些值规定幻灯片的移动范围为东北、东南、西北和西南的任意组合。最后的 <script> 标记定义了一个图像数组，然后使用 load_slides 和 start_slides 函数启动幻灯片放映。
出处：IBM developerWorks
责任编辑：moby
上一页 用DHTML与XML制作Ajax幻灯片 [5] 下一页 用DHTML与XML制作Ajax幻灯片 [7]
◎进入论坛网络编程版块参加讨论
|
第 1 页 
第 6 页 用DHTML与XML制作Ajax幻灯片 [6]
