js实现浮动在网页右侧的简洁QQ在线客服代码

2019-11-20 11:36:54

字体：大中小

来源：转载

供稿：网友

本文实例讲述了js实现浮动在网页右侧的简洁QQ在线客服代码。分享给大家供大家参考。具体如下：

这是一个简洁版的QQ在线客服，其实重要的是这个JS函数，只要有了这个JS函数，实际上你完全可以写一个这样的在线客服，它是用JS+CSS去控制层的隐藏与展开。注意代码中的QQ号记着要改一下哦。

运行效果截图如下：

在线演示地址如下：

http://demo.VeVB.COm/js/2015/js-float-qq-onlinefk-style-codes/

具体代码如下：

<!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/?uin=2563256" title="悠 然 设 计"><img src="http://wpa.qq.com/pa?p=1:981389008:4" border="0">主机业务</a><br/></div> <div class="qqkfhm bgdh"> <a href="tencent://message/?uin=365286" title="网页制作"><img src="http://wpa.qq.com/pa?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>

希望本文所述对大家的javascript程序设计有所帮助。

上一篇：js实现仿MSN带关闭功能的右下角弹窗代码

下一篇：JS实现先显示大图后自动收起显示小图的广告代码