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' onmouseout='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' onmouseover='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
