客服QQ滚动

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <style>
            *{ margin:0;padding:0;}
            html{height:100%;} 
            body{ position:relative;min-height:100%;}
            .qq-container{ position: absolute; right:0; top:100px; z-index: 999;}
            .qq-box{ position: relative;}
            .qq-wait,.qq-panel{ position: absolute; top:0; right:0;}
            .qq-box img{ max-width: none;}
            .qq-header img,.qq-footer img{ display: block;}
            .qq-mid{ background: #000; padding:20px 0; text-align: center; border:1px solid #333;}
            .div-space{height:1900px;}
            ul,li{list-style-type: none;}
        </style>
        <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
        <script>
            $(function(){
                function qqScroll() {
                    if (navigator.userAgent.indexOf('Firefox') >= 0){
                        bodyHeight=document.documentElement.scrollTop;
                    }
                    else
                    {
                        bodyHeight=$("body").scrollTop();
                    }
                    bodyHeight+=100;
                    $('.qq-container').animate({"top":bodyHeight+'px'},500);
                };
                t = setInterval(qqScroll, 500);
            });
        </script>
    </head>
    <body>
        <div class="div-space"></div>
        <div class="qq-container">
            <div class="qq-box">
                <div class="qq-wait">
                    <img src="http://skin.54kefu.net/skin/k012/r.gif">
                </div>
                <div class="qq-panel">
                    <div class="qq-header">
                        <img src="http://skin.54kefu.net/skin/k012/top.gif">
                    </div>
                    <div class="qq-mid">
                        <ul>
                            <li><img src="http://skin.54kefu.net/face/103.gif" title="售后服务部"></li>
                            <li><img src="http://skin.54kefu.net/face/103.gif" title="售后服务部"></li>
                            <li><img src="http://skin.54kefu.net/face/103.gif" title="售后服务部"></li>
                            <li><img src="http://skin.54kefu.net/face/103.gif" title="售后服务部"></li>
                        </ul>
                    </div>
                    <div class="qq-footer">
                        <img src="http://skin.54kefu.net/skin/k012/bottom.gif">
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

相关阅读:
PAT 1035. 插入与归并(25)
PAT 1034. 有理数四则运算(20)
PAT 1033. 旧键盘打字(20)
PAT 1032. 挖掘机技术哪家强(20)
PAT 1031. 查验身份证(15)
PAT 1030. 完美数列(25)
PAT 1029. 旧键盘(20)
PAT 1028. 人口普查(20)
PAT 1027. 打印沙漏(20)
PAT 1026. 程序运行时间(15)

原文地址：https://www.cnblogs.com/lixingbaophp/p/4451136.html