1. 右栏浮动广告
QUOTE:
<script language=javascript>var specialcode="<DIV id=searchspe style='Z-INDEX: 100; right: 1px; POSITION: absolute; TOP: 180px;'><TABLE cellSpacing=0 cellPadding=0 width=150 style='border-left:1px solid #2E6287;border-top:1px solid #2E6287;border-right:1px solid #2E6287;font-size:12px;color:#ffffff; border-bottom-color:#2E6287; border-bottom-width:1px'><TR bgcolor=#2E6287><TD height=20> 推荐↓</TD><TD style='CURSOR: hand' onclick=searchspe.style.visibility='hidden' width=30>关 闭</TD></TR></TABLE><table border='1' width='150' id='table1' height='500' bordercolor='#2E6287'><tr><td>广告内容</td></tr></table></DIV>";document.write(specialcode);lastScrollY=0;function heartBeat0(){diffY=document.body.scrollTop;percent=.1*(diffY-lastScrollY);if(percent>0)percent=Math.ceil(percent);else percent=Math.floor(percent);document.all.searchspe.style.pixelTop+=percent;lastScrollY=lastScrollY+percent;}window.setInterval("heartBeat0()",1);</script>.........
网页浮动广告窗口是一种常见的网页设计技术,用于在用户浏览页面时始终显示特定的广告或信息。这种技术通过JavaScript实现,可以将广告放置在屏幕的右侧或左侧,甚至可以设置为固定位置,使得无论用户滚动页面,广告始终保持在视线范围内。
1. 右栏浮动广告:
这段代码展示了创建右栏浮动广告的JavaScript实现。`<script>`标签内包含了定义广告元素的HTML和控制其行为的JavaScript函数。`<DIV>`元素设置了ID为`searchspe`,并用CSS属性`position: absolute;`、`right: 1px;`和`top: 180px;`来使其相对于浏览器窗口定位。`Z-INDEX: 100;`确保广告位于其他元素之上。广告内容被包含在一个宽度为150像素的表格中,表格具有蓝色边框,并有一个关闭按钮,当点击时,通过JavaScript隐藏广告(`onclick=searchspe.style.visibility='hidden'`)。
JavaScript函数`heartBeat0()`用于实时更新广告的位置。它获取当前页面滚动条的垂直位置(`scrollTop`),然后根据滚动的距离调整广告的顶部位置。`setInterval`函数每1毫秒调用一次`heartBeat0()`,确保广告随页面滚动而平滑移动。
2. 左栏浮动广告:
与右栏浮动广告类似,左栏浮动广告的代码也包括一个`<script>`标签,但CSS样式不同,将`right`属性改为了`left: 1px;`,并且`TOP`设置为50px,使广告出现在屏幕左侧顶部。广告的宽度增加到了360像素,其他结构和行为与右栏浮动广告相同。
3. 左栏固定广告:
虽然未提供完整代码,但根据给出的部分,这个左栏固定广告应该会使用`position: absolute;`来使其固定在屏幕左侧,顶部距离为50px。与浮动广告不同,固定广告不会随着页面滚动而改变位置,而是始终保持在屏幕的固定位置。
总结来说,网页浮动广告是通过JavaScript和CSS相结合的方式实现的,利用`position`属性实现定位,`Z-INDEX`控制层级,`scrollTop`处理滚动事件,以及`setInterval`定时执行函数来实现动态效果。这种方式可以提高广告的可见性,但同时也可能对用户体验造成一定影响,因此在设计时需要平衡广告的展示与用户体验的关系。