QQ在线客服浮动窗口

function QQLine(Direction,MarginX,MarginY){
    // Direction：参数值为left|right
    // MarginX：X轴方向边距
    // MarginY：顶边距
    
    var Html="<div style=/"width:109px; height:34px; background:url(/TempFolder/qq_top.gif);/"><img style=/"float:right; margin:4px 8px 0px 0px; cursor:pointer;/" title=/"关闭/" οnclick=/"JavaScript:document.getElementById('qqline').style.display='none';/" src=/"/TempFolder/qq_close.gif/" /></div>";
    Html+="<div style=/"width:109px; height:100px; text-align:center; background:url(/TempFolder/qq_middle.gif);/">";
    
    Html+="<p style=/"padding-top:7px;/">客服1<a href=/"tencent://message/?uin=455948725&Site=枫叶随风&Menu=yes/"><img style=/"vertical-align:middle;/" border=/"0/" title=/"枫叶随风/" src=/"/TempFolder/qq_online.gif/" /></a></p>";
    Html+="<p style=/"padding-top:7px;/">客服2<a href=/"tencent://message/?uin=455948725&Site=枫叶随风&Menu=yes/"><img style=/"vertical-align:middle;/" border=/"0/" title=/"枫叶随风/" src=/"/TempFolder/qq_online.gif/" /></a></p>";
    Html+="<p style=/"padding-top:7px;/">客服3<a href=/"tencent://message/?uin=455948725&Site=枫叶随风&Menu=yes/"><img style=/"vertical-align:middle;/" border=/"0/" title=/"枫叶随风/" src=/"/TempFolder/qq_online.gif/" /></a></p>";
    Html+="<p style=/"padding-top:7px;/">客服4<a href=/"tencent://message/?uin=455948725&Site=枫叶随风&Menu=yes/"><img style=/"vertical-align:middle;/" border=/"0/" title=/"枫叶随风/" src=/"/TempFolder/qq_online.gif/" /></a></p>";
    
    Html+="</div>";
    Html+="<div><img src=/"/TempFolder/qq_bottom.gif/" /></div>";
    Html+="<div><img src=/"/TempFolder/qq_logo.gif/" /></div>";
    
    var Div=document.createElement("div");
    Div.id="qqline";
    Div.style.position="absolute";
    Div.style.top=MarginY+"px";
    if (Direction=="left"){
        Div.style.left=MarginX+"px";
    }
    if (Direction=="right"){
        Div.style.right=MarginX+"px";
    }
    Div.innerHTML=Html;
    document.body.appendChild(Div);
    setInterval(FloatDiv,20);
    
    function FloatDiv(){
        var Did=document.getElementById("qqline");
        var DidTop=parseInt(Did.style.top);
        var Diff=(document.documentElement.scrollTop + MarginY - DidTop)*.70;
        Did.style.top=MarginY+document.documentElement.scrollTop-Diff+"px";
        if (Direction=="left"){
            Did.style.left=MarginX+"px";
        }
        if (Direction=="right"){
            Did.style.right=MarginX+"px";
        }
    }    
}

调用：QQLine("left",10,50);  //浮动在窗口左侧，左边距为10px，顶边距为50px。

 

实例演示：http://www.fengyekun.com/Study_709.html