小码哥的IT人生

SMIL In HTML

SMIL 2023-05-25 14:28:12小码哥的IT人生shichen

SMIL In HTML

Internet Explorer 能够在 HTML 文件中运行 SMIL 呈现。

在 IE 中运行 SMIL 呈现

通过 Internet Explorer 5.5 或更高的版本,能够将 SMIL 元素插入 HTML 文件中。

通过这种方式,任何 SMIL 呈现都能作为标准的 HTML 文件运行在因特网上。

添加引用

如需在 HTML 中使用 SMIL 元素,您必须为 Internet Explorer 定义一个 "time" 命名空间,这样才能识别这些元素。请这样做:

  1. 向 <html> 标签添加命名空间定义
  2. 添加一个 <?import> 元素,以导入 "time" 命名空间

如需向标准的 HTML 元素添加 SMIL 属性,您必须为 Internet Explorer 定义 "time" 类,这样才能识别这些属性。请这样做:

  1. 添加一个定义 "time" 类的 <style> 元素
<html xmlns:time="urn:schemas-microsoft-com:time">
<head>
  <?import namespace="time" implementation="#default#time2">
  <style>.time {behavior: url(#default#time2)}</style>
</head>

在下一段,您可以看到完整的运行实例。

添加 SMIL 元素

如需在 HTML 中运行 SMIL 呈现,只要为 SMIL 元素添加一个前缀以及一个 class 属性:

<time:seq repeatCount="indefinite">
  <img class="time" src="image1.jpg" dur="3s" />
  <img class="time" src="image2.jpg" dur="3s" />
</time:seq>

在上面的例子汇总,我们为 <img> 元素添加了 class="time",并为 SMIL 元素添加了 "time" 前缀。

提示:类和命名空间不必一定称为 "time"。任何名称都可以。

一个 Internet Explorer 实例

<html xmlns:time="urn:schemas-microsoft-com:time">
<head>
  <?import namespace="time" implementation="#default#time2">
  <style>.time {behavior: url(#default#time2)}</style>
</head>
<body>
  <time:seq repeatCount="indefinite">
    <img class="time" src="image1.jpg" dur="3s" />
    <img class="time" src="image2.jpg" dur="3s" />
  </time:seq>
</body>
</html>

 

完整实例【TIY】:

<html xmlns:t="urn:schemas-microsoft-com:time">
<head>
  <?import namespace="t" implementation="#default#time2">
  <style>.t {behavior: url(#default#time2)}</style>
</head>
<body>
<t:seq repeatCount="indefinite">
  <img class="t" src="/i/eg_sun.gif" dur="1s" />
  <img class="t" src="/i/eg_venus.gif" dur="1s" />
</t:seq>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
ICP备案号:苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024