没有什么很非凡的,只有所需要的。我还需要更改rotateDiv函数,以更新正在显示哪一个story,下面就是要用的代码:
function rotateDiv(stor){var divs = document.getElementById("storyContainer").getElementsByTagName("div");for (var i=0; i < divs.length; i ) {var div = divs[i];if ( (div.id != "")) {if(i != stor){div.style.display = "none";}else{div.style.display = "block";}}}var spans = document.getElementById("nav").getElementsByTagName("span");for (var i=0; i < spans.length; i ) {var span = spans[i];if ( (span.id != "")) {if(i != stor)span.className = "none";elsespan.className = "selStory";}}}
由于有一些新的样式,我们需要把它们添加到样式表里:
#nav { font-size:12px;position:absolute;top:100px;left:325px;} .selStory {background:#eee;border:1px solid #777;}
完成了,我们功能完备的旋转木马已经完成了,在这里可以查看完整的代码。
加入效果——让它看起来真的很酷
有了这个原型我们就可以真正地加入效果了,这样至少我们能够看到与在Flash里一样的效果。
再经过一些有创意的工作,我确信你创造的旋转木马一定会比我在仓促之间创造的要好。
什么时候不用JavaScript
知道什么时候使用JavaScript还不够,要取得最好的结果,你还需要知道什么时候不用JavaScript。你希望获得的效果越高级,使用JavaScript的优势就越少。
在最新和最眩目的效果上,JavaScript是绝对不是Flash的对手,Flash在获得相同效果所需要的时间上是其他产品无法比拟的。
假如你需要使用视频,那么flv是用于Web的最佳格式。这就是为什么YouTube和Google Video都使用Flash播放器的原因。
一旦你开始越来越多地使用JavaScript,浏览器之间的差异就会显得越明显。解决这一问题的一个重要途径是将平台标准化,这也就是Flash所适应的标准化平台。
结论
做到这一步需要花上一点功夫,也需要多喝几杯咖啡,但是可以结束了。
要记住的一件事是,假如你最终决定把Flash替换掉,那么你就和想要使用Flash的人差不多了。
假如你所需要的只不过是简单的旋转效果,那么JavaScript可能就是你的不二选择,假如你需要高级的动画以及各种视觉效果,那么还是使用Flash吧。
记住用合适的工具完成合适的任务。
评论加载中…
![]() |