浮动在网页右侧的简洁QQ在线客服

2024-09-05 12:22:36

字体：大中小

来源：转载

供稿：网友

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

<!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()"><img src="/d/file/p/2024/09-05/dcdae3ec3c1eb9954ccafd0bea6942a5.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"> <img src="http://wpa.qq.com/pa?p=1:981389008:4" border="0">主机业务<br/></div>      <div class="qqkfhm bgdh"> <img src="http://wpa.qq.com/pa?p=1:981389008:4" border="0">租用托管</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>

上一篇：可以展开、收缩的顶部滑动广告

下一篇：163网站的一款JS滑屏广告