HTML标签用法/替换

11
我知道使用<marquee>标签是不好的。
那么,如果滚动文本这么糟糕,使用JS达到同样的效果并不能让它变得更好,对吗?
假设我决定要有一些滚动文本(噫),那么有没有CSS(3?)或HTML(5?)的方式可以做到这一点且技术上是正确的(即没有被弃用)?
如果没有CSS / HTML解决方案,我应该使用:
- Javascript,它需要下载更多内容,并且可能会被关闭(这是优点还是缺点?),但我可以获得W3C正确、有效、未弃用和聪明的额外奖励,
还是应该使用
- 被人们所憎恶的<marquee>(<blink><blink>)标签,它非常轻量化(19字节!),在所有呈现模式和所有文档类型中都得到了所有浏览器的完全支持(尽管不应该),但已经被弃用?
谢谢。
P.S.我认为新闻滚动条是使用类似marquee样式的有效用途。 P.P.S.如果有人告诉我,如果我不想要一个沉重的Javascript解决方案,那我应该使用JQuery,因为它很轻量级,我将在评论区射击他们。
编辑:我添加了JQuery标签,因为这似乎是吸引JS问题专家关注的最佳方式,并且它在这里不是完全无关的。

5
@Koolinc,我个人没有对JQuery有任何意见,并且经常使用它。我只是反对这种思维方式:他说他不想使用JS因为它很重 -> JQuery很轻量级(在网站上写着)-> 他只考虑了两个选项,但JQuery是第三个选项 -> 他应该使用JQuery! - Baruch
6个回答

6

问题不在于效果不好。跑马灯、闪烁和字体标签的问题在于它们传达的是演示效果而非内容结构。


5

CSS3支持跑马灯效果,但只有少数浏览器支持(据我所知,Safari和Chrome是唯一支持的浏览器)

http://www.w3.org/TR/css3-marquee/

有几个JQuery插件可以实现这一功能,但它们需要加载JQuery(26Kb),虽然比只加载HTML的解决方案更重,但我不会称其为“重量级”。

http://plugins.jquery.com/plugin-tags/marquee

当然,你可以轻松地不使用JQuery自己完成它,但是查看那些插件可能会给你一些想法。
另一个要考虑的选择是制作一个小的Flash动画。

14
请不要在这样的事情上使用Flash。 - Andreas Kuckartz
1
@Andreas Kuckartz:您能否详细解释一下?我不明白在这种情况下使用Flash比使用JS更糟糕。目前CSS替代方案不可行,所以... - nico
2
Flash是专有的。它通常不分离表单/样式和内容。它在许多“i”设备上不受支持。正如您所写的那样,已经存在用JavaScript实现的解决方案。因此,我认为Flash不是滚动文本的合理选择。 - Andreas Kuckartz
2
@Andreas Kuckartz:说实话,我根本不会使用滚动文本...无论如何,我认为对于非必要信息来说使用它也不是太糟糕。它可以在大多数能上网的设备上运行,并且绝大多数公众都安装了Flash(或等效软件)。你也可以提出类似的问题关于JS(如果我禁用了JS怎么办?)。PS:至于“i-Devices”...好吧,别让我开始谈论那个,我甚至可能会使用Flash(无论如何,我尽可能避免使用)只是为了惹恼一些苹果粉丝!!!:P - nico

0

我一直在寻找最高效、跨浏览器支持的跑马灯实现。出于某些原因,即使是 Webkit CSS 跑马灯实现也有问题。

常见的方法是使用计时器(或 jQuery 动画实现)来调整元素的 CSS margin 属性。这种方法太容易出问题且效率很低。我提出了一种实施方案,它利用了 CSS3 转换,对于支持它的浏览器使用 CSS3 转换,否则使用包含元素的 scrollLeft 属性进行动画处理。虽然这是一个实验性的实现,但在 IE7+ 上运行良好。其他人也可能会发现它有用,https://github.com/gajus/marquee(演示 https://dev.anuary.com/60244f3a-b8b2-5678-bce5-f7e8742f0c69/)。


0

0

如果你确定它可以在你所针对的所有平台上运行,并且你不在乎w3c的说法,那么你当然可以使用跑马灯标签。你不可能找到一个少于14个字节的JavaScript解决方案。

唯一不幸的是,所有这些浏览器支持所有这些已弃用元素,而这些元素甚至不是任何HTML标准的一部分,原因是所有这些人都在使用这些元素,并且开始抱怨新版本不再支持他们1982年兼容的网站了。

所以请放心使用跑马灯,只要它对你有用,但如果你的网站在新的浏览器中停止工作,请不要抱怨。


1
该网站不会停止运行,只是跑马灯元素可能会消失。并不是我在推荐过时和/或非标准的元素。 - AUSteve

0

这里是实现在Firefox中的走马灯元素的代码,基本上是用JavaScript来完成的,所以你可以直接将该代码适应于所有浏览器。

该代码可以进行一些修改,以便在Firefox中可实现将跑马灯应用于任何元素,并通过CSS和XBL绑定(仅限Firefox示例)进行应用。相当于IE中的behaviours,而在Safari/Chrome中可以使用nico建议的CSS3,并使呈现层内容脱离标记,但只有您自己才知道是否值得尝试。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接