Js实现点击展开的网页客服

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>网页右侧点击可展开收缩的在线QQ客服代码</title>
<script type="text/javascript">
function getClass(oParent,sClass)
{
	var value=[];
	var Ele=oParent.getElementsByTagName('*');
	for (var i=0; i<Ele.length; i++)
	{
		var aClass=Ele[i].className.split(' ');
		for (n=0; n<aClass.length; n++)
		{
			if (aClass[n]==sClass)
			{
				value.push(Ele[i]);
			}
		}
	}
	return value;
}
function getStyle(obj,name)
{
	if(obj.currentStyle)
	{
		return obj.currentStyle[name];
	}
	else
	{
		return getComputedStyle(obj,false)[name];
	}
}
function Running(obj,json,fnEnd)
{
	clearInterval(obj.timer);
	obj.timer=setInterval(function()
	{
		var now=0;
		var bStop=true;
		for (var attr in json)
		{
			if(attr=='opacity')
			{
				now=Math.round(parseFloat(getStyle(obj,attr))*100);
			}
			else
			{
				now=parseInt(getStyle(obj,attr));
			}
			var speed=(json[attr]-now)/5;
			speed=speed>0?Math.ceil(speed):Math.floor(speed);
			if(now!=json[attr])bStop=false;
			if(attr=='opacity')
			{
				obj.style.filter='alpha(opacity:'+now+speed+')';
				obj.style.opacity=(now+speed)/100;
			}
			else
			{
				obj.style[attr]=speed+now+'px';
			}
		}
		if(bStop)
		{
			clearInterval(obj.timer);
			if(fnEnd)fnEnd();
		}
	}, 30);
}
window.onload=function()
{
	var oBox=document.getElementById('box');
	var oTitle=getClass(oBox,'title');
	var closed='关闭窗口';
	var opened='客户服务';
	var i=0;
	oTitle[0].onclick=function()
	{
		i++;
		(i%2)?Running(oBox,{right:0},function()
		{
			oTitle[0].innerHTML=closed;
		})
		:Running(oBox,{right:-200},function()
		{
			oTitle[0].innerHTML=opened;
		});
	}
}
</script>
<style>
* {
	margin:0px;
	padding:0px;
	font-family:'Arial';
}
#box {
	width:200px;
	height:400px;
	background:#fff;
	position:fixed;
	top:90px;
	right:-200px;
	border-radius:5px 0 0 5px;
	-webkit-box-shadow:2px 0 5px #333;
	-moz-box-shadow:2px 0 5px #333;
	box-shadow:2px 0 5px #333;
}
.title {
	width:25px;
	height:100px;
	position: absolute;
	left:-25px;
	background:red;
	top:150px;
	color:white;
	line-height:25px;
	text-align: center;
	vertical-align: middle;
	border-radius:5px 0 0 5px;
	cursor: pointer;
}
.info {
	color:#000;
	display:block;
	margin:10px;
	text-shadow:0 0 5px #333;
	-webkit-text-shadow:0 0 5px #333;
	-moz-text-shadow:0 0 5px #333;
	font-size:16px;
	border-bottom:1px dashed #333;
}
.qq {
	margin:10px;
	list-style:none;
}
.txt {
	width:auto;
	height:25px;
	display: block;
	font-size: 12px;
	float:left;
	line-height:25px;
	-webkit-text-shadow:0 0 5px #ccc;
	-moz-text-shadow:0 0 5px #ccc;
	text-shadow: 0 0 5px #ccc;
}
.csimg {
	width:200px;
	height:124px;
	position: absolute;
	left:0px;
	top:-124px;
}
.active {
	background:#ff6600;
}
</style>
</head>
<body>
<div id="box"> <span class="title">在线客服</span> <img class='csimg' src='//ku.shouce.ren/files/images/201601/56a31fce54634.png'/> <span class='info'>产品咨询</span>
  <ul class='qq'>
    <li><span class='txt'>咨询客服1：</span><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:123456789:51" alt="我们竭诚为您服务！" title="我们竭诚为您服务！"/></a></li>
    <li><span class='txt'>咨询客服2：</span><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:123456789:51" alt="我们竭诚为您服务！" title="我们竭诚为您服务！"/></a></li>
    <li><span class='txt'>咨询客服3：</span><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:123456789:51" alt="我们竭诚为您服务！" title="我们竭诚为您服务！"/></a></li>
  </ul>
  <span class='info'>售后服务</span>
  <ul class='qq'>
    <li><span class='txt'>售后咨询1：</span><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:123456789:51" alt="我们竭诚为您服务！" title="我们竭诚为您服务！"/></a></li>
    <li><span class='txt'>售后咨询2：</span><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:123456789:51" alt="我们竭诚为您服务！" title="我们竭诚为您服务！"/></a></li>
    <li><span class='txt'>售后咨询3：</span><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:123456789:51" alt="我们竭诚为您服务！" title="我们竭诚为您服务！"/></a></li>
  </ul>
</div>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

Js实现点击展开的网页客服

分类

网站常用

描述

Js实现点击展开的QQ网页客服，平时是不完全显示，只显示一个按钮，点击后会展开全部的客服，里面是一些QQ号码，适用于企业网站使用，不过测试发现，貌似只兼容IE,在火狐下测试失败，也请高手修正一下。里面的uin=123456789，=号后边的是Q...