• [织梦吧]唯一域名:www.dedecms8.com,织梦DedeCMS学习平台.

当前位置: > 网页制作 > JavaScript >

如何用JavaScript实现旋转木马

来源: www.dedecms8.com 编辑:织梦吧 时间:2018-09-19点击:

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基础

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

 

 

 

 

 

 

Secure IIS

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

Full story

 

 

 

 

User Group Mash

Find an Aussie user group near you with our new Google maps interface.

Full story

 

 

 

 

.NET 101

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

Full story

 

 

 

 

Understand CSS

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

Full story

 

 

 

 

 

 

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

 

 

 

 

 

 

 

 

 

Secure IIS

 

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

Full story

 

 

 

 

User Group Mash

 

Find an Aussie user group near you with our new Google maps interface.

Full story

 

 

 

 

.NET 101

 

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

Full story

 

 

 

 

Understand CSS

 

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

 

Full story

 

 

 

 

 

 

 

 

 

标签:

About D8

  • ©2014 织梦吧(d8) DedeCMS学习交流平台
  • 唯一网址 www.DedeCMS8.com 网站地图
  • 联系我们 1170734538@qq.com ,  QQ