前幾天工作中碰到一個在頁面中顯示浮動廣告的功能，這類js代碼實在很多，所以打算在網上找個代碼復制一下就OK了，找了半天卻沒有找到合適的。
雖然這些代碼都可以實現浮動層顯示在屏幕的固定位置，並隨着窗口滾動而滾動，但是現在顯示器普遍比較大，頁面內容只能顯示在屏幕的中央，當浮動廣告在左側或右側時，只能設置離窗口邊框的距離，於是離內容區很遠。我想實現浮動層能正好在內容區域的邊上。
找了兩三個小時也沒有找到合適的，一生氣自己寫了一個，只費了半個小時，呵呵。
代碼如下：
//設置浮動塊
//element:浮動窗的id
//position:基准位置，選項left、right或center,窗口左側還是右側，還是中心；默認是left
//distance:距離，離基准位置的距離，可以為正負值
//top:離窗口頂的距離
jQuery.fn.FloatBox=function(element,position,distance,top){
if(typeof(element)=="string")element=$(element);
if(element.size()<1)return;
//初始化一些值
position=position!=null && position!="" ? position : "left";
distance=distance!=null ? distance : $(window).width()/2;
top=top!=null ? top : 0;
//計算浮動窗體在左側位置（坐標）
var left= 0;
if(position=="left")left=distance;
if(position=="right")left=$(window).width()-distance-element.width();
if(position=="center")left=distance>0 ? $(window).width()/2+distance : $(window).width()/2+distance-element.width();
//設置浮動窗的屬性，主要是設置坐標
element.css({position: "absolute",
"z-index": 20001,
left: left,
top: top});
$(window).scroll(function (){
var offsetTop = $(window).scrollTop();
element.animate({top : offsetTop+top },{ duration:500 , queue:false });
})
}
上述代碼可以實現浮動塊居左，還是居右，還是居中；當居中時，可以設置distance的偏差值，如網頁的內容區域是1000px，則設置-500時浮動塊正好顯示在內容區的左側。
如下例代碼：
$(document).ready(function(){
$().FloatBox("#Ols","center",-520,140);
$().FloatBox("#qrcode","center",520,140);
});
設置了兩個浮動塊，一個在內容的左側，一個在內容的右側；
我測試了一下，在IE6、Firefox、Chrome中都正常，其它瀏覽器沒有測試。
我個人感覺使用還算方便，不過也有一些欠缺，例如現在只是考慮到的左右的位置，沒有考慮諸如固定左下角、右下角之類的位置。還好代碼並不復雜，有興趣的朋友可以完善一下。