2007-10-10

如何用JavaScript实现旋转木马

来源: 开发者在线 作者: 评论 0 条
 

没有什么很非凡的,只有所需要的。我还需要更改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吧。

记住用合适的工具完成合适的任务。


共5页: 上一页 [1] [2] [3] [4] 5 下一页
(本文仅表明作者个人观点,不代表本站及其管理员立场.) 推荐 收藏 投稿 打印 返回 关闭
上一篇:重构、标准、布局  
下一篇:网站标准之Flash页面如何通过校验
    评论加载中…

网站首页  -  网站地图 -   站长论坛  -  网站投稿  -    -  网站管理
Copyright © 2008 芜湖站长站 All Rights Reserved 皖ICP备07500611号