本文轉自：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="width:660px;border:1px solid #eee;margin:0 auto;height:3000px;"> 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 換行占位符。。。 </div> 頁面最底端～～～～頁面最底端～～～～頁面最底端～～～～頁面最底端～～～～頁面最底端～～～～頁面最底端～～～～頁面最底端～～～～頁面最底端～～～～頁面最底端～～～～ <div style="width: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>