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

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

 

posted @ 2013-06-09 22:03  songsoft  阅读(3480)  评论(0编辑  收藏  举报