符合W3C标准的浮动广告实现代码

TXT文件

下载需积分: 5 | 2KB | 更新于2024-09-10 | 90 浏览量 | 举报收藏

立即下载

"符合W3C的漂浮广告代码是一个网页设计示例，它使用HTML和JavaScript实现了一个在页面上浮动的广告条。这个代码片段是兼容W3C标准的，确保了良好的浏览器兼容性和网页结构的规范性。" 在这个代码中，我们可以看到以下几个关键知识点： 1. **DOCTYPE声明**： `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">` 这一行声明了文档类型为XHTML 1.0 Transitional，这是一个过渡性的HTML版本，允许混合使用HTML4和XHTML元素，适合逐步向更严格的XHTML标准过渡。 2. **HTML结构**：标准的HTML结构包括`<html>`、`<head>`和`<body>`标签。`<head>`中包含了文档的元信息，如字符编码和页面标题。在这个例子中，`<meta>`标签设置了字符编码为`gb2312`，这是一种简体中文编码。 3. **CSS样式**： CSS通过`style`属性内联定义在HTML元素中。`<div id="img1">`是一个带有ID "img1"的浮动广告框，设置了它的位置、大小、可见性等样式属性。`position: absolute`使其相对于最近的已定位祖先元素定位，而`Z-INDEX: 100`确保了广告框在其他元素之上显示。 4. **JavaScript**： - `document.write`用于在文档加载时动态插入HTML内容。在这个例子中，它创建了一个链接和一个图片，图片作为广告。 - 变量`xPos`、`yPos`、`step`、`delay`分别用于控制广告框的初始位置、移动位置、移动步长和延迟时间，使得广告框能按照设定的规则移动。 - 函数`changePos()`用于计算和更新广告框的位置，考虑了窗口大小和滚动条的影响。 - `interval`变量存储了定时器的引用，可以用来暂停或恢复广告框的移动。 5. **浏览器兼容性**：使用`document.documentElement`来获取文档元素的宽度和高度，以及滚动位置，以确保在不同浏览器中都能正确处理页面的尺寸和滚动。 6. **广告行为**：广告框的移动是由JavaScript定时器驱动的，通过调整`xPos`和`yPos`的值，广告会沿着页面浮动。变量`pause`可以控制广告的暂停和继续。这个代码实例展示了如何在遵循W3C标准的同时，利用HTML和JavaScript实现交互式的漂浮广告效果。这种技术常用于网站的在线营销，吸引用户注意并引导点击。然而，过度使用或者设计不当的漂浮广告可能会影响用户体验，因此在实际应用中需要谨慎处理。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>符合W3C的漂浮广告代码-脚本之家</title>
</head>
<body>
<script>
document.write ("<DIV id=img1 style='Z-INDEX: 100; LEFT: 2px; WIDTH: 252px; POSITION: absolute; TOP: 43px; HEIGHT: 172px; ")
document.write (" visibility: visible;'> ")
document.write (" <a href='http://s.jb51.net' target='_blank'> ")
document.write (" <img src='/upload/201204/20120411210123566.gif'style=border:none;/> ")
document.write (" </a></DIV> ")
var xPos = 300;
var yPos = 200;
var step = 1;
var delay = 8;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;
img1.style.top = yPos;
function changePos()
{
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
Hoffset = img1.offsetHeight;

下载后可阅读完整内容，剩余2页未读，立即下载