JS实现可展开滚动的QQ客服代码
2011-06-30 09:49
567 查看
代码内容：
<!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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js QQ客服悬浮效果实现代码
- js QQ客服悬浮效果实现代码
- JS实现从顶部下拉显示的带动画QQ客服特效代码
- 可展开滚动的QQ客服代码【蓝底客服中心】
- JS实现从顶部下拉显示的带动画QQ客服特效代码
- div+css布局的图片连续滚动js实现代码
- 实现公告栏无缝滚动的js代码（转）
- Js实现上下左右无缝隙滚动代码 二
- js上下视差滚动简单实现代码
- JS实现仿QQ面板的手风琴效果折叠菜单代码
- 跨平台移动开发 Xuijs超轻量级的框架 Dom与Event简洁代码实现文本展开收起
- 常见JS效果之图片减速度滚动实现代码
- JS实现的N多简单无缝滚动代码(包含图文效果)
- js控制滚动条缓慢滚动到顶部实现代码
- 在iframe里的页面编写js，实现在父窗口上创建动画效果展开和收缩的div（不变动iframe父窗口代码）
- js实现点击展开隐藏效果（实例代码）
- JS+CSS实现可展开/收起的QQ在线客服悬浮代码
- Js+CSS实现的间断和不间断文本滚动代码
- JS平滑无缝滚动效果的实现代码
- QQ在线客服代码 飘浮在右侧的QQ客服js特效演示