- <!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 src1="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 src1="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 src1="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 src1="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 src1="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 src1="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 src1="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 src1="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 src1="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 src1="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>
来源: http://www.phpxs.com/code/1004001/