教程集 > jQuery > jQuery 插件 > 正文 js 网页右侧悬浮QQ网站客服代码

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

发布时间：2023-12-19 编辑：jiaochengji.com

教程集为您提供js 网页右侧悬浮QQ网站客服代码等资源，欢迎您收藏本站，我们将为您提供最新的js 网页右侧悬浮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>js 网页右侧悬浮QQ网站客服代码</title>  <meta http-equiv="content-type" content="text/html;charset=gb2312">    <style type="text/css">  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{  	width:168px;  	height:auto;  	overflow:hidden;  	position:absolute;  	right:0;  	top:120px;  	color:#333;  	font-size:12px;  	letter-spacing:0px;  	z-index:101;  }  .qqlv{  	width:20px;  	height:197px;  	overflow:hidden;  	position:relative;  	float:right;  	z-index:50;  }  .close{  	width:20px;  	height:17px;  	overflow:hidden;  }  .qqlv2{  	width:20px;  	height:181px;  	overflow:hidden;  }  .qqkf{  	width:168px;  	height:auto;  	overflow:hidden;  	right:0;  	top:0;  	z-index:99;  }  .qqtop{  	width:168px;  	height:49px;  }  .qqcenter{  	width:168px;  	height:auto;  	overflow:hidden;  	background:url(http://www.111cn.net/qq/online_r5_c1.jpg) repeat-y left top;  }  .qqcenter_box{  	width:160px;  	height:auto;  	overflow:hidden;  }  .qq1{  	text-align:left;  	text-indent:10px;  	font-weight:bold;  }  .qq_line{  	width:150px;  	height:1px;  	margin-top:2px;  	margin-bottom:6px;  	overflow:hidden;  	background:url(http://www.111cn.net/qq/online_r7_c1.jpg) no-repeat;  }  .qq1_box{  	width:150px;  	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{  	width:168px;  	height:81px;  }  </style>  </head>  <body>  <div style="height:2000px;"></div>    <div class="qqbox" id="divQQbox">    <div class="qqlv" id="meumid" onmouseover="show()"><img src="http://p1.jquerycn.cn/111cn/3/9/1474563258_4024.gif"></div>    <div class="qqkf" style="display:none;" id="contentid" onmouseout="hideMsgBox(event)">      <div class="qqtop"><img src="http://p1.jquerycn.cn/111cn/f/9/1474563258_3359.jpg"></div>      <div class="qqcenter">        <div class="qqcenter_box">          <div class="qq1"><img src="http://p1.jquerycn.cn/111cn/4/2/1474563258_1115.jpg" align="absmiddle"> 在线咨询</div>          <div class="qq_line"></div>          <div class="qq1_box">            <ul>              <li><a href="tencent://message/?uin=8127544&Site=www.111cn.net&Menu=yes">客服咨询</li>                          </ul>          </div>          <div class="qq2"><img src="" 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="http://p1.jquerycn.cn/111cn/0/7/1474563258_8489.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网站客服代码
 javascript 悬浮在页面左侧的可显隐网摘收藏效果
 网页右侧的可显隐网站QQ客服代码
 网页右侧漂浮广告窗口的js代码
 浮动QQ客服代码
 js 左右悬浮广告的实例代码
 jquery实现漂浮在网页右侧的qq在线客服插件示例
 js固定在网页右侧可显隐网站客服代码
 JS右下角悬浮广告代码的简单示例
 javascript 漂亮的网页右下角固定悬浮窗口

上一篇：TextBox 下一篇：三级导航菜单,三级竖向展开/收缩导航菜单

[关闭]

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

最近更新

浏览排行