类代码
/**********************************************
Name:scroll banner class
author:heroman ma
date:2005-12-15
**********************************************/
//Global variable
function switchFloater()
{
    //event handler,use for handler the checkbox click event
    this.FloaterCollectionObj.show(this.checked);
}

function SynPannelStatus()
{
    this.pannel.style.display="none";
    this.control.checked=false;
}


function Scroll()
{
    var floaterItems;
    var delta=0.8;
    floaterItems=window.scrollobj.items;
    for(var i=0;i<floaterItems.length;i++)
       {
        var followObj  = floaterItems[i].object;
        var followObj_x  = (typeof(floaterItems[i].x)=='string'?eval(floaterItems[i].x):floaterItems[i].x);
        var followObj_y  = (typeof(floaterItems[i].y)=='string'?eval(floaterItems[i].y):floaterItems[i].y);
    
        if(followObj.offsetLeft!=(document.body.scrollLeft+followObj_x))
        {
         var dx=(document.body.scrollLeft+followObj_x-followObj.offsetLeft)*delta;
         dx=(dx>0?1:-1)*Math.ceil(Math.abs(dx));
         followObj.style.left=followObj.offsetLeft+dx;
         }
    
        if(followObj.offsetTop!=(document.body.scrollTop+followObj_y))
        {
         var dy=(document.body.scrollTop+followObj_y-followObj.offsetTop)*delta;
         dy=(dy>0?1:-1)*Math.ceil(Math.abs(dy));
         followObj.style.top=followObj.offsetTop+dy;
         }        
       }
}

  

function FloaterItem(id,x,y,width,height,title,content,hasTitle)
{
    //class floater,for single floater object
    this.id=id;
    this.x=x;
    this.y=y;
    this.width=width;
    this.height=height;
    this.content=content;
    this.title=title;
    this.status=true;
    this.hasTitle=hasTitle;
    this.show=function()
    {
        if(this.status)
            this.object.style.display="block";
        else
            this.object.style.display="none";
    }
    
}

function FloaterCollection(controlId)
{
    //class floaterCollection,muitil floater object
    this.items=[];
    this.control=document.getElementById(controlId);
    this.control.onclick=switchFloater;
    this.control.FloaterCollectionObj=this;
    
    this.addItem=function(obj)
    {
    var strHtml;
    strHtml="<div id='"+obj.id+"' style='text-align:left;z-index:10;position:absolute;width:"+obj.width+"px;height:"+obj.height+"px;left:"+(typeof(obj.x)=="string"?eval(obj.x):obj.x)+";top:"+(typeof(obj.y)=="string"?eval(obj.y):obj.y)+"'><table";
    if(obj.hasTitle)
        {
            strHtml+=" border=1 "
        }
    else
    {
        strHtml+=" border=0 style='border:1px solid #cccccc'" 
    }
    strHtml+="bordercolor='#cccccc' width='100%' height='100%' cellpadding=0 cellspacing=0>";
    if(obj.hasTitle)
        {
            strHtml+="<tr><td height=5><table width='100%' cellspacing=0 cellpadding=0 border=0><tr style='background-color:#efefef;color:arrow'><td style='padding-left:5px;font-weight:bold;'>"+obj.title+"</td><td width=20 align=center><img  id=\""+obj.id+"_Close\" src='/images/close.gif' border=0 alt='Close' style='cursor:hand' /></td></tr></table></td></tr>";
        }
    strHtml+="<tr><td style='padding:3px;background-color:#ffffff' valign=top>"+obj.content+"</td></tr>";
    if(!obj.hasTitle)
    {
    strHtml+="<tr align=right height=20><td style='padding-right:4px;'><img id=\""+obj.id+"_Close\" src='/images/close.gif' border=0 alt='Close' style='cursor:hand'  /></td></tr>";
    }
    strHtml+="</table></div>";
    document.write(strHtml);
    obj.object=document.getElementById(obj.id);
    var objClose=document.getElementById(obj.id+"_Close");
    objClose.control=document.getElementById(controlId);
    objClose.pannel=document.getElementById(obj.id);
    objClose.onclick=SynPannelStatus;
    this.items[this.items.length]=obj;
    }    

    this.show=function(flag)
    {
        for(var i=0;i<this.items.length;i++)
        {
            this.items[i].status=flag;
            this.items[i].show();
        }
    }
    
    this.play=function()
    {
        window.scrollobj=this;
        document.body.onscroll=Scroll;
    }
}

其中Floater代表一个飘浮对象
FloaterCollection是一组飘浮对象
FlotaerCollection有一个ControlID,传递一个CHECKBOX对象的ID即可,目的是用来打开或关闭飘浮广告组

上面的代码借用了网上流行的对联广告代码的一部分
但是,我把它封装成了类
使用
<input name="CbShowPannel" title="显示/隐藏在线客服面板" type="checkbox" id="CbShowPannel" value="true" checked="checked" /><span style="Color:red">在线客服</span>
<script language="Javascript1.2" src="/common/common.js"></script>
<script language="Javascript1.2">
  var myFloater=new FloaterCollection("CbShowPannel");
  var myFloaterX=5;
  var myFloaterY=75;
  var myFloaterWidth=120;
  var myFloaterHeight=100;
  
  var myFloaterItem=new FloaterItem("Item1",myFloaterX,myFloaterY,myFloaterWidth,myFloaterHeight,"在线客服","<table border=0 cellpadding=2><tr><td><img src='/images/qq.gif' border=0 align=absmiddle><a href='#'>客户专员一</a></td></tr><tr><td><img src='/images/qq_offline.gif' border=0 align=absmiddle><a href='#'>客户专员二</a></td></tr><tr><td><img src='/images/qq.gif' border=0 align=absmiddle><a href='#'>客户专员一</a></td></tr><tr><td><img src='/images/qq_offline.gif' border=0 align=absmiddle><a href='#'>客户专员二</a></td></tr><tr><td><img src='/images/qq.gif' border=0 align=absmiddle><a href='#'>客户专员一</a></td></tr><tr><td><img src='/images/qq_offline.gif' border=0 align=absmiddle><a href='#'>客户专员二</a></td></tr><tr><td><img src='/images/qq.gif' border=0 align=absmiddle><a href='#'>客户专员一</a></td></tr><tr><td><a target=blank href='http://wpa.qq.com/msgrd?V=1&Uin=82788612&Site=www.yaoanbattery.com&Menu=yes' ><img border='0' SRC='http://wpa.qq.com/pa?p=1:82788612:4' alt='客服人员' align=absmiddle> 客服人员</a></td></tr></table>",true);
  myFloater.addItem(myFloaterItem);
  myFloater.play();
</script>

不过,需要注意,一个页面只能放一个FloaterCollection,我正在改进,以使用可以同时放多个Collection