Jquery插件-浮動廣告

 前幾天工作中碰到一個在頁面中顯示浮動廣告的功能，這類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中都正常，其它瀏覽器沒有測試。

我個人感覺使用還算方便，不過也有一些欠缺，例如現在只是考慮到的左右的位置，沒有考慮諸如固定左下角、右下角之類的位置。還好代碼并不復雜，有興趣的朋友可以完善一下。