
<!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>右侧悬浮 QQ在线客服</title> |
<meta http-equiv="content-type" content="text/html;charset=gb2312"> |
<style type="text/css"> |
.qqbox a:link { |
color: #000; |
text-decoration: none; |
} |
.qqbox a:visited { |
color: #000; |
text-decoration: none; |
} |
.qqbox a:hover { |
color: #f80000; |
text-decoration: underline; |
} |
.qqbox a:active { |
color: #f80000; |
text-decoration: underline; |
} |
.qqbox { |
width: 132px; |
height: auto; |
overflow: hidden; |
position: absolute; |
right: 0; |
top: 100px; |
color: #000000; |
font-size: 12px; |
letter-spacing: 0px; |
} |
.qqlv { |
width: 25px; |
height: 256px; |
overflow: hidden; |
position: relative; |
float: right; |
z-index: 50px; |
} |
.qqkf { |
width: 120px; |
height: auto; |
overflow: hidden; |
right: 0; |
top: 0; |
z-index: 99px; |
border: 6px solid #138907; |
background: #fff; |
} |
.qqkfbt { |
width: 118px; |
height: 20px; |
overflow: hidden; |
background: #138907; |
line-height: 20px; |
font-weight: bold; |
color: #fff; |
position: relative; |
border: 1px solid #9CD052; |
cursor: pointer; |
text-align: center; |
} |
.qqkfhm { |
width: 112px; |
height: 22px; |
overflow: hidden; |
line-height: 22px; |
padding-right: 8px; |
position: relative; |
margin: 3px 0; |
} |
.bgdh { |
width: 102px; |
padding-left: 10px; |
} |
</style> |
</head> |
<body> |
<div class="qqbox" id="divQQbox"> |
<div class="qqlv" id="meumid" onmouseover="show()"> |
<h2 style="background: #093; color: #FFF; padding: 3px">QQ在线客服</h2> |
</div> |
<div class="qqkf" style="display: none;" id="contentid" |
onmouseout="hideMsgBox(event)"> |
<div class="qqkfbt" |
onmouseout="showandhide('qq-','qqkfbt','qqkfbt','K',5,1);" id="qq-1" |
onfocus="this.blur();">客 服 中 心</div> |
<div id="K1"> |
<div class="qqkfhm bgdh"><a href="tencent://message/?uin=10000"><img |
src="http://wpa.qq.com/pa?p=1:10000:4" border="0">在线客服</a><br /> |
</div> |
<div class="qqkfhm bgdh"><a href="tencent://message/?uin=10000"><img |
src="http://wpa.qq.com/pa?p=1:10000:4" border="0">在线客服</a></div> |
<div class="qqkfhm bgdh">手机:13000000000</div> |
</div> |
<div class="qqkfbt" |
onClick="showandhide('qq-','qqkfbt','qqkfbt','K',5,2);" id="qq-2" |
onfocus="this.blur();">充 值 中 心</div> |
<div id="K2" style="display: none"> |
<div class="qqkfhm bgdh"><a href="tencent://message/?uin=10000"><img |
src="http://wpa.qq.com/pa?p=1:10000:4" border="0">在线客服</a><br /> |
</div> |
<div class="qqkfhm bgdh"><a href="tencent://message/?uin=10000"><img |
src="http://wpa.qq.com/pa?p=1:10000:4" border="0">在线客服</a></div> |
<div class="qqkfhm bgdh">手机:13000000000</div> |
</div> |
<div class="qqkfbt" |
onClick="showandhide('qq-','qqkfbt','qqkfbt','K',5,3);" id="qq-3" |
onfocus="this.blur();">机 房 中 心</div> |
<div id="K3" style="display: none"> |
<div class="qqkfhm bgdh"><a href="tencent://message/?uin=10000"><img |
src="http://wpa.qq.com/pa?p=1:10000:4" border="0">在线客服</a><br /> |
</div> |
<div class="qqkfhm bgdh"><a href="tencent://message/?uin=10000"><img |
src="http://wpa.qq.com/pa?p=1:10000:4" border="0">在线客服</a></div> |
<div class="qqkfhm bgdh">手机:13000000000</div> |
</div> |
<div class="qqkfbt" |
onClick="showandhide('qq-','qqkfbt','qqkfbt','K',5,4);" id="qq-4" |
onfocus="this.blur();">咨 询 联 系</div> |
<div id="K4" style="display: none"> |
<div class="qqkfhm bgdh"><a href="tencent://message/?uin=10000"><img |
src="http://wpa.qq.com/pa?p=1:10000:4" border="0">在线客服</a><br /> |
</div> |
<div class="qqkfhm bgdh"><a href="tencent://message/?uin=10000"><img |
src="http://wpa.qq.com/pa?p=1:10000:4" border="0">在线客服</a></div> |
<div class="qqkfhm bgdh">手机:13000000000</div> |
</div> |
<div class="qqkfbt" |
onClick="showandhide('qq-','qqkfbt','qqkfbt','K',5,5);" id="qq-5" |
onfocus="this.blur();">投 诉 建 议</div> |
<div id="K5" style="display: none"> |
<div class="qqkfhm bgdh"><a href="tencent://message/?uin=10000"><img |
src="http://wpa.qq.com/pa?p=1:10000:4" border="0">在线客服</a><br /> |
</div> |
<div class="qqkfhm bgdh"><a href="tencent://message/?uin=10000"><img |
src="http://wpa.qq.com/pa?p=1:10000:4" border="0">在线客服</a></div> |
<div class="qqkfhm bgdh">手机:13000000000</div> |
</div> |
</div> |
</div> |
<script language="javascript"> |
function showandhide(h_id,hon_class,hout_class,c_id,totalnumber,activeno) { |
var h_id,hon_id,hout_id,c_id,totalnumber,activeno; |
for (var i=1;i<=totalnumber;i++) { |
document.getElementById(c_id+i).style.display='none'; |
document.getElementById(h_id+i).className=hout_class; |
} |
document.getElementById(c_id+activeno).style.display='block'; |
document.getElementById(h_id+activeno).className=hon_class; |
} |
var tips; |
var theTop = 100; |
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; |
} |
//http: |
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(); |
if(typeof(HTMLElement)!="undefined")//给firefox定义contains()方法,ie下不起作用 |
{ |
HTMLElement.prototype.contains=function (obj) |
{ |
while(obj!=null&&typeof(obj.tagName)!="undefind"){// |
if(obj==this) return true; |
obj=obj.parentNode; |
} |
return false; |
} |
} |
function show() |
{ |
document.getElementById("meumid").style.display="none" |
document.getElementById("contentid").style.display="block" |
} |
function hideMsgBox(theEvent){ |
if (theEvent){ |
var browser=navigator.userAgent; |
if (browser.indexOf("Firefox")>0){//Firefox |
if (document.getElementById("contentid").contains(theEvent.relatedTarget)) { |
return |
} |
} |
if (browser.indexOf("MSIE")>0 || browser.indexOf("Presto")>=0){ |
if (document.getElementById('contentid').contains(event.toElement)) { |
return;//结束函式 |
} |
} |
} |
document.getElementById("meumid").style.display = "block"; |
document.getElementById("contentid").style.display = "none"; |
} |
</script> |
</body> |
</html> |




