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中都正常，其它浏览器没有测试。

我个人感觉使用还算方便，不过也有一些欠缺，例如现在只是考虑到的左右的位置，没有考虑诸如固定左下角、右下角之类的位置。还好代码并不复杂，有兴趣的朋友可以完善一下。