[Web]页面二侧漂浮的广告

最新推荐文章于 2020-11-09 17:30:18 发布

原创最新推荐文章于 2020-11-09 17:30:18 发布 · 820 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#web #border #table #function #div #string

(3)Web 专栏收录该内容

36 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现的浮动广告栏效果。通过设置元素的绝对定位，并结合页面滚动事件来调整广告栏的位置，确保其始终可见。代码中还包含了关闭广告的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如图：

实现代码如下：

<DIV id=ad_dl01 style="Z-INDEX: 1; LEFT: 5px; VISIBILITY: visible; WIDTH: 100px; POSITION: absolute; TOP: 95px">
<TABLE cellSpacing=0 cellPadding=0 width=100 border=0>
<TBODY>
<TR>
<TD align=left>
<A onclick="ad_dl01.style.visibility='hidden'">
<IMG height=16 src="yanglan_01.gif" width=100 border=0></A></TD>
</TR>
<TR>
<TD><A href="http://book.youkuaiyun.com/programmer/" target=_blank><IMG height=184 src="cxy.gif" width=100 border=0></A></TD></TR></TBODY></TABLE></DIV>

<DIV id=ad_dl02 style="Z-INDEX: 1; RIGHT: 5px; VISIBILITY: visible; WIDTH: 100px; POSITION: absolute; TOP: 95px">
<TABLE cellSpacing=0 cellPadding=0 width=100 border=0>
<TBODY>
<TR>
<TD align=right><A onclick="ad_dl02.style.visibility='hidden'"><IMG height=16 src="yanglan_01.gif" width=100 border=0></A></TD></TR>
<TR>
<TD><A href="http://book.youkuaiyun.com/subject/0710asp/" target=_blank><IMG height=184 src="0710aspban100.jpg" width=100 border=0></A></TD></TR></TBODY></TABLE></DIV>

<SCRIPT type=text/javascript>

var step_ratio = 0.1;
objs = new Array();
objs_x = new Array();
objs_y = new Array();

function addfollowmark(name, x, y) {
  i = objs.length;
  objs[i] = document.getElementById(name);
  objs_x[i] = x;
  objs_y[i] = y;
}

function followmark() {
  for(var i=0; i<objs.length; i++) {
    var fm = objs[i];
    var fm_x = typeof(objs_x[i]) == 'string' ? eval(objs_x[i]) : objs_x[i];
    var fm_y = typeof(objs_y[i]) == 'string' ? eval(objs_y[i]) : objs_y[i];
    if (fm.offsetLeft != document.body.scrollLeft + fm_x) {
      var dx = (document.body.scrollLeft + fm_x - fm.offsetLeft) * step_ratio;
      dx = (dx > 0 ? 1 : -1) * Math.ceil(Math.abs(dx));
      fm.style.left = fm.offsetLeft + dx;
    }
var diffY;
if (document.documentElement && document.documentElement.scrollTop)
diffY = document.documentElement.scrollTop;
else if (document.body)
diffY = document.body.scrollTop;

    if (fm.offsetTop != diffY  + fm_y) {
      var dy = (diffY  + fm_y - fm.offsetTop) * step_ratio;
      dy = (dy > 0 ? 1 : -1) * Math.ceil(Math.abs(dy));
      fm.style.top = fm.offsetTop + dy;
    }
    fm.style.display = '';
  }
}

addfollowmark("ad_dl01", 5, 100);
addfollowmark("ad_dl02", "document.body.clientWidth-105", 100);

setInterval('followmark()',20);

</SCRIPT>