飘浮、对联及悬浮广告代码大全

### 飘浮、对联及悬浮广告代码详解 #### 一、背景介绍 随着互联网技术的发展，网页设计越来越注重用户体验与广告展示效果之间的平衡。其中，“飘浮”、“对联”以及“悬浮”广告因其独特的展示方式和较好的用户体验而备受青睐。这类广告通常采用JavaScript实现，具有良好的移植性和兼容性。 #### 二、飘浮广告的基本概念 飘浮广告是指那些不固定在页面某一位置，而是可以根据用户滚动页面的动作进行移动的广告形式。这种广告不会遮挡主要内容，也不会像弹窗广告那样被大多数浏览器拦截，因此更容易被用户接受。 #### 三、对联广告的特点 对联广告是一种将广告以对称的形式放置于网页左右两侧的设计。这种广告形式借鉴了传统中国对联的布局，不仅美观，而且可以通过合理设置关闭按钮等方式减少对用户的干扰，提高广告的有效性。 #### 四、悬浮广告的应用场景 悬浮广告是固定在网页某一部位，即使用户滚动页面也会保持不动的广告形式。这种广告常见于页面顶部或底部，具有很高的可见度，特别适合用于重要信息的展示。 #### 五、代码实现分析 接下来我们将详细介绍飘浮、对联及悬浮广告的具体实现方法。 ##### （一）居顶、不随下拉条滚动的广告代码 这段代码实现了两个对联式广告，分别位于页面的左右两侧，并且不会随着页面滚动而移动。具体实现方式如下： ```javascript <SCRIPT language=javascript event=FSCommand() for=dl> duilian2.style.visibility='hidden'; duilian3.style.visibility='hidden'; </SCRIPT> <SCRIPT language=javascript> function winload() { duilian2.style.top = 20; duilian2.style.left = 5; duilian3.style.top = 20; duilian3.style.right = 5; } // 检测浏览器宽度是否超过800像素 if (document.body.offsetWidth > 800) { document.write("<div id=duilian2 style='position: absolute; visibility: visible; z-index: 1'><EMBED src='1.swf' quality=high WIDTH=100 HEIGHT=300 TYPE='application/x-shockwave-flash' id=dl></EMBED></div>" + "<div id=duilian3 style='position: absolute; visibility: visible; z-index: 1'><EMBED src='1.swf' quality=high WIDTH=100 HEIGHT=300 TYPE='application/x-shockwave-flash' id=dl></EMBED></div>"); } winload(); </SCRIPT> ``` 这段代码通过`document.write`动态生成HTML元素，并利用CSS的`position: absolute`属性实现元素的绝对定位。同时，通过调整`top`和`left`或`right`的值来控制广告的位置。 ##### （二）随下拉条滚动的广告代码 该段代码实现了随页面滚动的广告效果，即当用户滚动页面时，广告会随之移动。实现方式如下： ```javascript <SCRIPT FOR='EccoolAd' EVENT='fscommand()' LANGUAGE='javascript'> AdLayer1.style.visibility='hidden'; AdLayer2.style.visibility='hidden'; </script> <script> function initEcAd() { document.all.AdLayer1.style.posTop = -200; document.all.AdLayer1.style.visibility = 'visible'; document.all.AdLayer2.style.posTop = -200; document.all.AdLayer2.style.visibility = 'visible'; MoveLeftLayer('AdLayer1'); MoveRightLayer('AdLayer2'); } function MoveLeftLayer(layerName) { var x = 5; var y = 50; var diff = (document.body.scrollTop + y - document.all[layerName].style.posTop) * 0.40; var newY = document.body.scrollTop + y - diff; document.all[layerName].style.posTop = newY; } function MoveRightLayer(layerName) { // 右侧广告的移动逻辑与左侧类似，此处略去详细代码。 } initEcAd(); </script> ``` 通过监听`scroll`事件并计算广告元素的新位置来实现广告跟随页面滚动的效果。`MoveLeftLayer`和`MoveRightLayer`函数分别用于计算左侧和右侧广告的新位置。 ##### （三）关闭按钮的实现 在Flash中创建一个关闭按钮，将其转换为“按钮”组件，并添加以下代码： ```actionscript on(release) { getURL("FSCommand:", ""); } ``` 这里的`getURL`函数发送一个命令给网页，通知网页执行相应的操作，例如隐藏广告层。 通过上述代码示例可以实现飘浮、对联及悬浮广告的不同效果。这些技术在实际应用中需要根据网站的整体风格和用户体验进行适当的调整。此外，随着技术的发展，HTML5和CSS3提供了更多的可能性来实现这些效果，开发者们可以根据实际情况选择合适的技术栈来实现更加丰富多彩的网页广告。