JS实现可展开滚动的QQ客服代码

代码内容:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS实现可展开滚动的QQ客服代码_网页代码站(www.webdm.cn)</title>
<style type=text/css>
    H2 {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-TOP-STYLE: none; PADDING-TOP: 0px; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: 

none; LIST-STYLE-TYPE: none; BORDER-BOTTOM-STYLE: none
}



UL {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-TOP-STYLE: none; PADDING-TOP: 0px; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: 

none; LIST-STYLE-TYPE: none; BORDER-BOTTOM-STYLE: none
}
LI {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-TOP-STYLE: none; PADDING-TOP: 0px; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: 

none; LIST-STYLE-TYPE: none; BORDER-BOTTOM-STYLE: none
}

A:hover {
	COLOR: #000000
}
A {
	FONT-SIZE: 12px; COLOR: #696969; TEXT-DECORATION: none
}



.QQbox {
	Z-INDEX: 99; RIGHT: 0px; WIDTH: 178px; POSITION: absolute; TOP: 40px
}
.QQbox .press {
	RIGHT: 0px; WIDTH: 33px; CURSOR: pointer; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; POSITION: absolute; HEIGHT: 158px; BORDER-

BOTTOM-STYLE: none
}
.QQbox .Qlist {
	BACKGROUND: url(http://www.webdm.cn/images/20100921/qq_listbg.gif) repeat-y -155px 0px; LEFT: 0px; WIDTH: 145px; POSITION: absolute
}
.QQbox .Qlist .t {
	FONT-SIZE: 1px; FLOAT: right; WIDTH: 145px; HEIGHT: 6px
}
.QQbox .Qlist .b {
	FONT-SIZE: 1px; FLOAT: right; WIDTH: 145px; HEIGHT: 6px
}
.QQbox .Qlist .t {
	BACKGROUND: url(http://www.webdm.cn/images/20100921/qq_listbg.gif) no-repeat left 50%
}
.QQbox .Qlist .b {
	BACKGROUND: url(http://www.webdm.cn/images/20100921/qq_listbg.gif) no-repeat right 50%
}
.QQbox .Qlist .con {
	BACKGROUND: #fff; MARGIN: 0px auto; WIDTH: 90%
}
.QQbox .Qlist .con H2 {
	BORDER-RIGHT: #3a708d 1px solid; BORDER-TOP: #3a708d 1px solid; BACKGROUND: url(http://www.webdm.cn/images/20100921/qq_listbg.gif) repeat-y -163px 0px; FONT: bold 

12px/22px "宋体"; BORDER-LEFT: #3a708d 1px solid; COLOR: #fff; BORDER-BOTTOM: #3a708d 1px solid; HEIGHT: 22px; TEXT-ALIGN: center
}
.QQbox .Qlist .con UL {
	
}
.QQbox .Qlist .con UL LI {
	PADDING-RIGHT: 0px; PADDING-LEFT: 8px; BACKGROUND: #ffffff; PADDING-BOTTOM: 0px; PADDING-TOP: 5px; HEIGHT: 20px
}
.QQbox .Qlist .con UL LI.odd {
	BACKGROUND: #fff
}

</style>

</head>

<body>

<SCRIPT type="text/javascript">
    document.write("<div class='QQbox' id='divQQbox' >");

    document.write("<div class='Qlist' id='divOnline' οnmοuseοut='hideMsgBox(event);' style='display : none;'>");

    document.write("<div class='t'></div>");

    document.write("<div class='con'>");

    document.write("<h2>在线客服</h2>");

    document.write("<ul>");

    document.write("<li class=odd><a href=' http://wpa.qq.com/msgrd?V=1&Uin=187397645&Site=网页代码站欢迎您&Menu=yes' target='_blank'><img src=' 

http://wpa.qq.com/pa?p=1:123456789:4'  border='0' alt='QQ' />商城客服</a></li>");

    document.write("<li><a href=' http://wpa.qq.com/msgrd?V=1&Uin=187397645&Site=网页代码站欢迎您&Menu=yes' target='_blank'><img src=' http://wpa.qq.com/pa?

p=1:858854788:4'  border='0' alt='QQ' />商城售后</a></li>");

    document.write('<tr><td><li><a target="_blank" href="http://amos.im.alisoft.com/msg.aw?v=2&uid=szmaimaiba&site=cntaobao&s=1&charset=utf-8" ><img border="0" 

src="http://amos.im.alisoft.com/online.aw?v=2&uid=szmaimaiba&site=cntaobao&s=1&charset=utf-8" alt="网页代码站欢迎您" /></a></li></td></tr>');

    document.write('<tr><td><li><a target="_blank" href="http://amos.im.alisoft.com/msg.aw?v=2&uid=%E8%88%9E%E8%B9%88%E7%94%A8%E5%93%81%E6%89%B9%E5%8F%91%E5%BA

%97&site=cntaobao&s=1&charset=utf-8" ><img border="0" src="http://amos.im.alisoft.com/online.aw?v=2&uid=%E8%88%9E%E8%B9%88%E7%94%A8%E5%93%81%E6%89%B9%E5%8F%91%E5%BA

%97&site=cntaobao&s=1&charset=utf-8" alt="网页代码站欢迎您" /></a></li></td></tr>');

    document.write("</ul>"); document.write("</div>");

    document.write("<div class='b'></div>");

    document.write("</div>");

    document.write("<div id='divMenu' οnmοuseοver='OnlineOver();'><img src='http://www.webdm.cn/images/20100921/qq_1.png' class='press' alt='QQ客服热线'></div>");

    document.write("</div>");



    //<![CDATA[

    var tips; var theTop = 40/*这是默认高度,越大越往下*/; var old = theTop;

    function initFloatTips() {

        tips = document.getElementById('divQQbox');

        moveTips();

    };

    function moveTips() {

        var tt = 50;

        if (window.innerHeight) {

            pos = window.pageYOffset

        }

        else if (document.documentElement && document.documentElement.scrollTop) {

            pos = document.documentElement.scrollTop

        }

        else if (document.body) {

            pos = document.body.scrollTop;

        }

        pos = pos - tips.offsetTop + theTop;

        pos = tips.offsetTop + pos / 10;



        if (pos < theTop) pos = theTop;

        if (pos != old) {

            tips.style.top = pos + "px";

            tt = 10;

            //alert(tips.style.top);

        }



        old = pos;

        setTimeout(moveTips, tt);

    }

    //!]]>

    initFloatTips();







    function OnlineOver() {

        document.getElementById("divMenu").style.display = "none";

        document.getElementById("divOnline").style.display = "block";

        document.getElementById("divQQbox").style.width = "145px";

    }



    function OnlineOut() {

        document.getElementById("divMenu").style.display = "block";

        document.getElementById("divOnline").style.display = "none";



    }



    function hideMsgBox(theEvent) { //theEvent用来传入事件,Firefox的方式
        if (theEvent) {
            var browser = navigator.userAgent; //取得浏览器属性
            if (browser.indexOf("Firefox") > 0) { //如果是Firefox
                if (document.getElementById('divOnline').contains(theEvent.relatedTarget)) { //如果是子元素
                    return; //结束函式

                }

            }

            if (browser.indexOf("MSIE") > 0) { //如果是IE

                if (document.getElementById('divOnline').contains(event.toElement)) { //如果是子元素

                    return; //结束函式

                }

            }

        }

        /*要执行的操作*/

        document.getElementById("divMenu").style.display = "block";

        document.getElementById("divOnline").style.display = "none";

    }
</SCRIPT>
<center>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</center>
</body>
</html>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>

代码来自:http://www.webdm.cn/webcode/c9b9b688-2fc5-4da1-962b-35bc6d61689a.html

转载于:https://www.cnblogs.com/webdm/archive/2011/06/30/2094064.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值