本文转自：http://www.noonenet.cn/newshtml/newsinfor/js-float-ad.html
代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-CN" /> <title>js页面跟随滚动条两侧漂浮广告</title> <style type="text/css"> div.floats {/*浮动容器通用样式*/ position:absolute; left:-1000px; /*上面两句是必需的，下面看实际情况去定义了*/ border:solid 1px #777; padding:3px; background:#333; color:white; width:100px; height:80px; opacity: 0.5; filter:alpha(opacity=50); } div#test1,div#test2{top:100px;}/*居中向左右定位容器初始高度*/ div#test3,div#test4{top:200px;}/*左右定位的两个容器初始高度*/ </style> <script type="text/javascript"> var D=new Function('obj','return document.getElementById(obj);') function htmlbody(){ return ( document.documentElement.clientHeight<=document.body.clientHeight &&document.documentElement.clientHeight!=0 ) ?document.documentElement:document.body; } //浏览器滚动条位置 function scrollLeft(){return (!window.pageYOffset)?htmlbody().scrollLeft:window.pageXOffset;} function scrollTop(){return (!window.innerHeight)?htmlbody().scrollTop:window.pageYOffset;} //实际应距左距离 function getleft(strobjs,strLeftType,strleft){ var temp_getleft = 0; if (strLeftType=="left"){ temp_getleft = scrollLeft()*1 + strleft*1; }else if (strLeftType=="mid"){ (strleft*1<0) ?temp_getleft = scrollLeft()*1 + strleft*1 + htmlbody().clientWidth*1/2 - strobjs.offsetWidth*1 :temp_getleft = (scrollLeft()*1+strleft*1 + htmlbody().clientWidth*1/2); }else if (strLeftType=="right"){ temp_getleft = scrollLeft()*1 + htmlbody().clientWidth*1 - strleft*1 - strobjs.offsetWidth*1; } return temp_getleft; } function moveTips(strobj,theTop,theLeft,theLeftType) { var old,nowobj = D(strobj); var nowleft = nowobj.style.left.replace("px","")*1;//返回在改变窗口大小或移动横滚动条前的距左部距离（数值） var temp_left = getleft(nowobj,theLeftType,theLeft);//实际应距左距离 var re_theTop = theTop; if (temp_left!=nowleft){//横向递增 (Math.abs(temp_left-nowleft)>3&&Math.abs(temp_left-nowleft)<600) ?((temp_left>nowleft)?nowleft += Math.abs(temp_left-nowleft)/5 :nowleft -= Math.abs(temp_left-nowleft)/5) :nowleft = temp_left; nowobj.style.left = nowleft + "px"; } if (!openweb){old = re_theTop;var openweb;}/*这是默认高度*/; var pos,tt=50; pos = scrollTop()*1-nowobj.offsetTop*1+re_theTop*1; pos = nowobj.offsetTop+pos/10;//纵向开始递增 if (pos < re_theTop) pos = re_theTop; if (pos != old) {nowobj.style.top = pos+"px";tt=5;} old = pos; setTimeout("moveTips('"+strobj+"','"+theTop+"','"+theLeft+"','"+theLeftType+"')",tt); } </script> </head> <body> <div style="660px;border:1px solid #eee;margin:0 auto;height:3000px;"> 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 换行占位符。。。 </div> 页面最底端～～～～页面最底端～～～～页面最底端～～～～页面最底端～～～～页面最底端～～～～页面最底端～～～～页面最底端～～～～页面最底端～～～～页面最底端～～～～ <div style="5000px;"> </div> <div id="test1" class="floats">浮动层1 !</div> <div id="test2" class="floats">浮动层2 !</div> <div id="test3" class="floats">浮动层3 !</div> <div id="test4" class="floats">浮动层4 !</div> <script type="text/javascript"> moveTips('test1','100','332','mid',"0"); moveTips('test2','100','-332','mid',"0"); moveTips('test3','200','10','left',"1"); moveTips('test4','200','10','right',"1"); </script> </body> </html>