在線QQ客服代碼 – Javascript教程_JS教程_技術文章 – 程式設計聯盟

<!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>
<p class="qqbox" id="pQQbox">
  <p class="qqlv" id="meumid" onmouseover="show()"><img src=/wp-content/images1/20180920/2012022309275078757.gif"></p>
  <p class="qqkf" style="display:none;" id="contentid" onmouseout="hideMsgBox(event)">
    <p class="qqkfbt" onmouseout="showandhide('qq-','qqkfbt','qqkfbt','K',5,1);" id="qq-1" onfocus="this.blur();">客服中心</p>
    <p id="K1">
      <p class="qqkfhm bgdh"> <a href="tencent://message/?uin=12345678"><img src="http://wpa.qq.com/pa?p=1:12345678:4" border="0">在線客服</a><br/></p>
      <p class="qqkfhm bgdh"> <a href="tencent://message/?uin=12345678"><img src="http://wpa.qq.com/pa?p=1:12345678:4" border="0">在線客服</a></p>
      <p class="qqkfhm bgdh">手機:13922222222</p>
    </p>
    <p class="qqkfbt" onClick="showandhide('qq-','qqkfbt','qqkfbt','K',5,2);" id="qq-2" onfocus="this.blur();">財務充值</p>
    <p id="K2" style="display:none">
      <p class="qqkfhm bgdh"> <a href="tencent://message/?uin=12345678"><img src="http://wpa.qq.com/pa?p=1:12345678:4" border="0">在線客服</a><br/></p>
      <p class="qqkfhm bgdh"> <a href="tencent://message/?uin=12345678"><img src="http://wpa.qq.com/pa?p=1:12345678:4" border="0">在線客服</a></p>
      <p class="qqkfhm bgdh">手機:13955432222</p>
    </p>
    <p class="qqkfbt"  onClick="showandhide('qq-','qqkfbt','qqkfbt','K',5,3);" id="qq-3" onfocus="this.blur();">機房值班</p>
    <p id="K3" style="display:none">
      <p class="qqkfhm bgdh"> <a href="tencent://message/?uin=12345678"><img src="http://wpa.qq.com/pa?p=1:12345678:4" border="0">在線客服</a><br/></p>
      <p class="qqkfhm bgdh"> <a href="tencent://message/?uin=12345678"><img src="http://wpa.qq.com/pa?p=1:12345678:4" border="0">在線客服</a></p>
      <p class="qqkfhm bgdh">手機:13222235523</p>
    </p>
    <p class="qqkfbt"  onClick="showandhide('qq-','qqkfbt','qqkfbt','K',5,4);" id="qq-4" onfocus="this.blur();">渠道咨詢</p>
    <p id="K4" style="display:none">
      <p class="qqkfhm bgdh"> <a href="tencent://message/?uin=12345678"><img src="http://wpa.qq.com/pa?p=1:12345678:4" border="0">在線客服</a><br/></p>
      <p class="qqkfhm bgdh"> <a href="tencent://message/?uin=12345678"><img src="http://wpa.qq.com/pa?p=1:12345678:4" border="0">在線客服</a></p>
      <p class="qqkfhm bgdh">手機:13222225523</p>
    </p>
    <p class="qqkfbt" onClick="showandhide('qq-','qqkfbt','qqkfbt','K',5,5);" id="qq-5" onfocus="this.blur();">投訴建議</p>
    <p id="K5" style="display:none">
      <p class="qqkfhm bgdh"> <a href="tencent://message/?uin=12345678"><img src="http://wpa.qq.com/pa?p=1:12345678:4" border="0">在線客服</a><br/></p>
      <p class="qqkfhm bgdh"> <a href="tencent://message/?uin=12345678"><img src="http://wpa.qq.com/pa?p=1:12345678:4" border="0">在線客服</a></p>
      <p class="qqkfhm bgdh">手機:13952222523</p>
    </p>
  </p>
</p>
<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('pQQbox');
    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:
          pospos=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;  
             objobj=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;//結束函式 www.aiwalls.com
            }
        }
      }
      document.getElementById("meumid").style.display = "block";
      document.getElementById("contentid").style.display = "none";
    }
</script>
</body>
</html>
 
摘自德仔的專欄
 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。