QQ咨询漂浮框

 在培训,学校的网站的上我们经常能看到一个浮动的咨询窗口,可以与老师进行QQ聊天咨询,就像下面的一样:

它会随着滚动条的滚动而上下浮动,下面有一个自己写的例子,供参考:
<div>
   <script language="javascript">
    var online = new Array();
    if (!document.layers)
        document.write('<div id="divStayTopLeft" style="position:absolute;">')
</script>
<script>
    function guanbi() {
        var guan=document.getElementByIdx_x("guan");
        guan.style.display="none";
    }
</script>


<layer left="30" top="52" width="70" height="66" id="divStayTopLeft">
<div style="width:91px; height:149px; float:left; background-image:url('images/home_013.jpg'); display:block; padding-left:10px; background-repeat:no-repeat" id="guan">
    <div style="width:40px; height:20px; margin-top:5px; float:left; padding-left:50px; font-size:12px; color:#fff; cursor:hand" onclick="guanbi()">关闭</div>
     <div style="width:70px; height:50px; margin-top:65px; float:left">
        <div style="width:70px; height:15px; float:left; font-size:12px; color:#FFFFFF">
            <span style="float:left;">
            <a href="http://sighttp.qq.com/cgi-bin/check?sigkey=9a9508773f00d040a7769e0b981cef17c09538f624dd4beb40ba232c9854bda7"; target=_blank; onclick="var tempSrc='http://sighttp.qq.com/wpa.js?rantime='+Math.random()+'&sigkey=9a9508773f00d040a7769e0b981cef17c09538f624dd4beb40ba232c9854bda7';var oldscript=document.getElementByIdx_x('testJs');var newscript=document.createElement_x('script');newscript.setAttribute('type','text/javascript'); newscript.setAttribute('id', 'testJs');newscript.setAttribute('src',tempSrc);if(oldscript == null){document.body.appendChild(newscript);}else{oldscript.parentNode.replaceChild(newscript, oldscript);}return false;">团 队[ 咨询 ]</a>
            </span>
        </div>
        <div style="width:70px; height:15px; float:left; font-size:12px; color:#FFFFFF">
            <span style="float:left;">
             <a href="http://sighttp.qq.com/cgi-bin/check?sigkey=f44e18c2f505e6c48cb5953cbd07481d3aac34e082a1b6bc1f5c7a613287f8a9"; target=_blank; onclick="var tempSrc='http://sighttp.qq.com/wpa.js?rantime='+Math.random()+'&sigkey=f44e18c2f505e6c48cb5953cbd07481d3aac34e082a1b6bc1f5c7a613287f8a9';var oldscript=document.getElementByIdx_x('testJs');var newscript=document.createElement_x('script');newscript.setAttribute('type','text/javascript'); newscript.setAttribute('id', 'testJs');newscript.setAttribute('src',tempSrc);if(oldscript == null){document.body.appendChild(newscript);}else{oldscript.parentNode.replaceChild(newscript, oldscript);}return false;">散 客[ 咨询 ]</a>
            </span>
        </div>         
    </div>
</div>
</layer>

<script type="text/javascript">
    var verticalpos = "frombottom"
    if (!document.layers)
        document.write('</div>')
    function JSFX_FloatTopDiv() {
        var startX = screen.width - 121,
        startY = 250;
        var ns = (navigator.appName.indexOf("Netscape") != -1);
        var d = document;
        function ml(id) {
            var el = d.getElementById ? d.getElementById(id) : d.all ? d.all[id] : d.layers[id];
            if (d.layers) el.style = el;
            el.sP = function(x, y) { this.style.left = x; this.style.top = y; };
            el.x = startX;
            if (verticalpos == "fromtop")
                el.y = startY;
            else {
                el.y = ns ? pageYOffset + innerHeight : document.documentElement.scrollTop + document.documentElement.clientHeight;
                el.y -= startY;
            }
            return el;
        }
        window.stayTopLeft = function() {
            if (verticalpos == "fromtop") {
                var pY = ns ? pageYOffset : document.documentElement.scrollTop;
                ftlObj.y += (pY + startY - ftlObj.y) / 8;
            }
            else {
                var pY = ns ? pageYOffset + innerHeight : document.documentElement.scrollTop + document.documentElement.clientHeight;
                ftlObj.y += (pY - startY - ftlObj.y) / 8;
            }
            ftlObj.sP(ftlObj.x, ftlObj.y);
            setTimeout("stayTopLeft()", 10);
        }
        ftlObj = ml("divStayTopLeft");
        stayTopLeft();
    }
    JSFX_FloatTopDiv();
</script>
</div>
</layer>
</div>

 

posted @ 2011-03-07 15:39  双魂人生  阅读(1424)  评论(0编辑  收藏  举报