如何用JavaScript实现旋转木马

时间:2009-04-23 00:18:37  来源:第二电脑网上收集  作者:第二电脑网

  第二电脑网导读:本文里,我将告诉你如何用JavaScript实现一个可用性更高的旋转木马(carousel)而弃用Flash。JavaScript——两害相交取其轻在本文里,我不准备去争论为什么要开发一个旋转木马,而是要接受我们不得不去开发的事实。那么问题就来了:为什么要使用JavaSript而不是Flash?它要比Flash的实现更加轻巧——通过优化代码,我们只需要几千字节...
  正文:

Flash动画可以让Web网站看起来很漂亮,但是由于各种原因不是每个人都会在自己的客户端浏览器安装Flash播放器。如果你或者你的用户不幸安装了64位的linux发行版,或者你痛恨在自己的Web页面上放动画,那么你就不得不面对没有Flash动画的情况了。

在本文里,我将告诉你如何用JavaScript实现一个可用性更高的旋转木马(carousel)而弃用Flash。

JavaScript——两害相交取其轻

在本文里,我不准备去争论为什么要开发一个旋转木马,而是要接受我们不得不去开发的事实。

那么问题就来了:为什么要使用JavaSript而不是Flash?

  • 它要比Flash的实现更加轻巧——通过优化代码,我们只需要几千字节就能够获得一个可以使用的旋转木马,加载图片所需要的时间要比HTML和JavaScript的长。
  • 可维护性是另外一个原因。很多开发人员都知道JavaScript在可维护性上要胜Flash一筹。也许你没有(足够的)设计资源来创建一个功能完整的Flash实现,所以如果将它突然留给开发人员,这就意味着JavaScript是一个可行的替代方案。
  • 降级。在禁用JavaScript的情况下将有用的内容发送给用户要比在禁用Flash的情况下容易得多。
  • 可访问性。用屏幕阅读器浏览旋转木马要比浏览Flash对象更容易。
  • Google。如果你的内容是在页面中的,Google就能够搜索到它;如果它在Flash中,而且页面中没有隐藏旋转木马的话,那么Googlebot就无法找到链接

HTML基础

知道了这些原因,就让我们从将要在本文中用到的四个内容开始创建旋转木马吧。

<html>

<body>

<div id="storyContainer">

<div id="story1">

<a href="http://www.builderau.com.au/program/iis/soa/Protect_IIS_log_files_by_moving_them_to_a_secure_location/0,339028427,339271617,00.htm" class="ched">Secure IIS</a>

Log files are essential to reconstruct events before an IIS Web server failure. Learn how to protect your log files with this tip.

<span class="fstory"><a href="http://www.cnet.com.au/software/security/0,39029558,40058242,00.htm">Full story</a></span>

</div>

<div id="story2">

<a href="http://www.builderau.com.au/program/html/soa/Microformats_and_Mapping/0,339028420,339271486,00.htm" class="ched">User Group Mash</a>

Find an Aussie user group near you with our new Google maphotoshop/ target=_blank class=infotextkey>ps interface.

<span class="fstory"><a href="http://www.builderau.com.au/program/html/soa/Microformats_and_Mapping/0,339028420,339271486,00.htm">Full story</a></span>

</div>

<div id="story3">

<a href="http://www.builderau.com.au/program/dotnet/soa/Quick_Start_guide_to_Microsoft_NET_development/0,339028399,339271495,00.htm" class="ched">.NET 101</a>

Learn how the .NET Framework works and the tools you'll need to get up and running in this quick start guide.

<span class="fstory"><a href="http://www.builderau.com.au/program/dotnet/soa/Quick_Start_guide_to_Microsoft_NET_development/0,339028399,339271495,00.htm">Full story</a></span>

</div>

<div id="story4" >

<a href="http://www.builderau.com.au/program/Css/soa/Understanding_the_CSS_box_model/0,39028392,39269220,00.htm" class="ched">Understand CSS</a>

Before diving into CSS learn some of the core drivers and concepts.

<span class="fstory"><a href="http://www.builderau.com.au/program/css/soa/Understanding_the_CSS_box_model/0,39028392,39269220,00.htm">Full story</a></span>

</div>

</div>

</body>

</html>

这个时候蒙娜丽莎对我们还没有用。现在让我们向这些div加入一些样式,让它看起来更像我们所知道的旋转木马:

<html>

<head>

<style>

.storydiv {

height:182px;

width:355px;

padding-left:175px;

top:0px;

left:0px;

}

#story1 {

background:url(http://www.builderau.com.au/i/s/cov/securitychain170110.gif) no-repeat;

}

#story2 {

background:url(http://www.builderau.com.au/i/s/cov/browser170110.jpg) no-repeat;

}

#story3 {

background:url(http://www.builderau.com.au/i/s/cov/dotnet170110.gif) no-repeat;

}

#story4 {

background:url(http://www.builderau.com.au/i/s/cov/tools170110.jpg) no-repeat;

}

.storyDesc{

padding-top: 10px;

padding-right: 8px;

display:block;

}

.fStory {

padding-top: 10px;

display:block;

font-weight:bold;

}

</style>

 

</head>

<body>

<div id="storyContainer">

<div id="story1" class="storydiv">

<a href="http://www.builderau.com.au/program/iis/soa/Protect_IIS_log_files_by_moving_them_to_a_secure_location/0,339028427,339271617,00.htm" class="ched">Secure IIS</a>

<span class="storydesc">

Log files are essential to reconstruct events before an IIS Web server failure. Learn how to protect your log files with this tip.</span>

<span class="fstory"><a href="http://www.cnet.com.au/software/security/0,39029558,40058242,00.htm">Full story</a></span>

</div>

<div id="story2" class="storydiv">

<a href="http://www.builderau.com.au/program/html/soa/Microformats_and_Mapping/0,339028420,339271486,00.htm" class="ched">User Group Mash</a>

<span class="storydesc">

Find an Aussie user group near you with our new Google maps interface.</span>

<span class="fstory"><a href="http://www.builderau.com.au/program/html/soa/Microformats_and_Mapping/0,339028420,339271486,00.htm">Full story</a></span>

</div>

<div id="story3" class="storydiv">

<a href="http://www.builderau.com.au/program/dotnet/soa/Quick_Start_guide_to_Microsoft_NET_development/0,339028399,339271495,00.htm" class="ched">.NET 101</a>

<span class="storydesc">

Learn how the .NET Framework works and the tools you'll need to get up and running in this quick start guide.</span>

<span class="fstory"><a href="http://www.builderau.com.au/program/dotnet/soa/Quick_Start_guide_to_Microsoft_NET_development/0,339028399,339271495,00.htm">Full story</a></span>

</div>

<div id="story4" class="storydiv">

<a href="http://www.builderau.com.au/program/css/soa/Understanding_the_CSS_box_model/0,39028392,39269220,00.htm" class="ched">Understand CSS</a>

<span class="storydesc">

Before diving into CSS learn<br/>some of the core drivers and concepts.</span>

 

<span class="fstory"><a href="http://www.builderau.com.au/program/css/soa/Understanding_the_CSS_box_model/0,39028392,39269220,00.htm">Full story</a></span>

</div>

 

</div>

</body>

</html>


如何用JavaScript实现旋转木马》由第二电脑网原创提供,转载请注明:http://www.002pc.com/master/College/Programming/JavaScript/2009-02-05/9095.html


关键字:

关于《如何用JavaScript实现旋转木马》文章的评论

站内搜索: 高级搜索

热门搜索: Windows style 系统 tr IP QQ CPU 安装 function 注册 if td