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

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

qghboy

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

阅读量802

点赞数

分类专栏： (3)Web 文章标签： web border table function div string

本文链接：https://blog.youkuaiyun.com/qghboy/article/details/1895753

版权

(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 >