<!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 > |