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中都正常，其它浏览器没有测试。
我个⼈感觉使⽤还算⽅便，不过也有⼀些⽋缺，例如现在只是考虑到的左右的位置，没有考虑诸如固定左下⾓、右下⾓之类的位置。还好代码并不复杂，有兴趣的朋友可以完善⼀下。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。