zoukankan      html  css  js  c++  java
  • 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="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="40px; height:20px; margin-top:5px; float:left; padding-left:50px; font-size:12px; color:#fff; cursor:hand" onclick="guanbi()">关闭</div>
         <div style="70px; height:50px; margin-top:65px; float:left">
            <div style="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="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>

    多思考,多创新,才是正道!
  • 相关阅读:
    周末总结
    大数据开源框架技术汇总
    oracle迁移mysql总结
    梯度下降
    BFC的概念
    元素类型
    window10安装tensorflow
    学习使用git
    设计模式中的关系
    拟合圆
  • 原文地址:https://www.cnblogs.com/shuang121/p/1974580.html
Copyright © 2011-2022 走看看