js 网页右侧悬浮QQ网站客服代码

时间：2022-06-25 21:44:18 编辑：袖梨来源：一聚教程网

提示：您可以先修改部分代码再运行

<!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/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>">
ul,li,img{
	margin:0;
	padding:0;
	border:0;
	list-style:none;
}
.qqbox a{
	text-decoration:none;
	color:#333;
}
.qqbox a:hover{
	text-decoration:underline;
	color:#f30;
}
.qqbox{
	
	height:auto;
	overflow:hidden;
	position:absolute;
	right:0;
	top:120px;
	color:#333;
	font-size:12px;
	letter-spacing:0px;
	z-index:101;
}
.qqlv{
	
	
	overflow:hidden;
	position:relative;
	float:right;
	z-index:50;
}
.close{
	
	
	overflow:hidden;
}
.qqlv2{
	
	
	overflow:hidden;
}
.qqkf{
	
	height:auto;
	overflow:hidden;
	right:0;
	top:0;
	z-index:99;
}
.qqtop{
	
	
}
.qqcenter{
	
	height:auto;
	overflow:hidden;
	background:url(http://www.111com.net/qq/online_r5_c1.jpg) repeat-y left top;
}
.qqcenter_box{
	
	height:auto;
	overflow:hidden;
}
.qq1{
	text-align:left;
	text-indent:10px;
	font-weight:bold;
}
.qq_line{
	
	
	margin-top:2px;
	margin-bottom:6px;
	overflow:hidden;
	background:url(http://www.111com.net/qq/online_r7_c1.jpg) no-repeat;
}
.qq1_box{
	
	height:auto;
	text-align:left;
	overflow:hidden;
}
.qq1_box ul li{
	text-align:left;
	text-indent:13px;
	margin-bottom:3px;
}
.qq1_box ul .tm{
	margin-left:10px;
}
.qq2{
	text-align:left;
	text-indent:10px;
	font-weight:bold;
	margin-top:6px;
}
.qq2 span{
	font-weight:normal;
}
.qq2_box ul li{
	text-align:left;
	text-indent:8px;
	margin-bottom:3px;
}
.qqend{
	
	
}
</style>
</head>
<body>
<div style=""></div>

<div class="qqbox" id="divQQbox">
  <div class="qqlv" id="meumid" onMouseOver="show()"><img  src="https://img.111com.net/get_pic/2010/03/20101113005408535.gif"></div>
  <div class="qqkf" style="display:none;" id="contentid" onMouseOut="hideMsgBox(event)">
    <div class="qqtop"><img  src="https://img.111com.net/get_pic/2010/03/20101113005414223.jpg"></div>
    <div class="qqcenter">
      <div class="qqcenter_box">
        <div class="qq1"><img  src="https://img.111com.net/get_pic/2010/03/20101113005421224.jpg" align="absmiddle"> 在线咨询</div>
        <div class="qq_line"></div>
        <div class="qq1_box">
          <ul>
            <li><a target="_blank" href="tencent://message/?uin=8127544&Site=www.zzsky.cn&Menu=yes" title="点击我发送消息"><a href="tencent://message/?uin=8127544&Site=www.111com.net&Menu=yes">客服咨询</a></li>
            
          </ul>
        </div>
        <div class="qq2"><img  src="/201011111950/online_r3_c2.jpg" align="absmiddle"> 售后支持</div>
        <div class="qq_line"></div>
        <div class="qq2_box">
          <ul>
            <li>业务电话：000-000000</li>
            <li style="margin-left:60px;">000-000000</li>
            <li>夜间值班：000-000000</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="qqend"><img  src="https://img.111com.net/get_pic/2010/03/20101113005427443.jpg"></div>
  </div>
</div>
<script language="javascript">
var tips; 
var theTop = 120;
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>

提示：您可以先修改部分代码再运行

推荐专题

最新下载

热门教程

js 网页右侧悬浮QQ网站客服代码

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程