Jquery插件-浮动⼴告
前⼏天⼯作中碰到⼀个在页⾯中显⽰浮动⼴告的功能,这类js代码实在很多,所以打算在⽹上个代码复制⼀下就OK了,了半天却没有到合适的。
虽然这些代码都可以实现浮动层显⽰在屏幕的固定位置,并随着窗⼝滚动⽽滚动,但是现在显⽰器普遍⽐较⼤,页⾯内容只能显⽰在屏幕的中央,当浮动⼴告在左侧或右侧时,只能设置离窗⼝边框的距离,于是离内容区很远。我想实现浮动层能正好在内容区域的边上。
了两三个⼩时也没有到合适的,⼀⽣⽓⾃⼰写了⼀个,只费了半个⼩时,呵呵。
代码如下:
//设置浮动块
//element:浮动窗的id
//position:基准位置,选项left、right或center,窗⼝左侧还是右侧,还是中⼼;默认是left
//distance:距离,离基准位置的距离,可以为正负值
/
/top:离窗⼝顶的距离
jQuery.fn.FloatBox=function(element,position,distance,top){
jquery插件分享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中都正常,其它浏览器没有测试。
我个⼈感觉使⽤还算⽅便,不过也有⼀些⽋缺,例如现在只是考虑到的左右的位置,没有考虑诸如固定左下⾓、右下⾓之类的位置。还好代码并不复杂,有兴趣的朋友可以完善⼀下。