js implements simple QQ online customer service code floating on the right side of the web page

js implements simple QQ online customer service code floating on the right side of the web page_javascript skills

WBOY

Release： 2016-05-16 15:40:46

Original

1726 people have browsed it

The example in this article describes the js implementation of simple QQ online customer service code floating on the right side of the web page. Share it with everyone for your reference. The details are as follows:

This is a concise version of QQ online customer service. In fact, the important thing is this JS function. As long as you have this JS function, you can actually write such an online customer service. It uses JS CSS to control the hiding of the layer. and expand. Pay attention to the QQ number in the code and remember to change it.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/js-float-qq-onlinefk-style-codes/

The specific code is as follows:

<!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在线客服</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()"><img src="images/qq.gif"></div>
 <div class="qqkf" style="display:none;" id="contentid" onmouseout="hideMsgBox(event)">
 <div class="qqkfbt" onmouseout="showandhide('qq-','qqkfbt','qqkfbt','K',1,1);" id="qq-1" onfocus="this.blur();">客 服 中 心</div>
 <div id="K1">
 <div class="qqkfhm bgdh"> <a href="tencent://message/&#63;uin=2563256" title="悠 然 设 计"><img src="http://wpa.qq.com/pa&#63;p=1:981389008:4" border="0">主机业务</a><br/></div>
 <div class="qqkfhm bgdh"> <a href="tencent://message/&#63;uin=365286" title="网页制作"><img src="http://wpa.qq.com/pa&#63;p=1:981389008:4" border="0">租用托管</a></div>
 <div class="qqkfhm bgdh">手机：12345692877</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 = 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();
 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>

Copy after login

I hope this article will be helpful to everyone’s JavaScript programming design.