QQ在线客服：缓冲向左弹出的网页右侧边栏Qq客服代码

小提示

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>
<title>网页右侧QQ悬浮滚动在线客服</title>
<style>
/*开发制作，Jason.Leung, QQ,147430218*/
#qq_icon {width:187px; height:193px; background:url(//ku.shouce.ren/files/images/201601/56a31efc97fa8.png) no-repeat; position:fixed; right:-200px; top:150px; cursor:pointer;}
#cs_online {width:217px; height:324px; position:fixed; top:150px; right:-220px; background:url(//ku.shouce.ren/files/images/201601/56a31f1d5820c.png) no-repeat; display:none; filter:alpha(opacity:0); opacity:0;}
.qq_context {width:185px; height:244px; margin-top:73px; margin-left:24px; list-style:none; padding:0px;} 
.qq_context li {width:175px; height:25px; margin-left:5px; margin-top:20px; float:left;}
.span_t {display:block; float:left; color:#333; line-height:25px; font-size:12px; font-family:'Arial';}
</style>
<script type="text/javascript">
function myEvent(obj,ev,fn){
	if (obj.attachEvent){
		obj.attachEvent('on'+ev,fn);
	}else{
		obj.addEventListener(ev,fn,false);
	};
};
function getbyClass(id,sClass){
	var oParent = document.getElementById(id);
	var all = oParent.getElementsByTagName('*');
	var array = [];
	for (var i=0; i<all.length; i++){
		if (all[i].className == sClass){
			array.push(all[i]);
		};
	};
	return array;
};
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);
}
function Flexing(obj,json,fnEnd){
	clearInterval(obj.timer);
	obj.timer=setInterval(function(){
		var now=0;
		var bStop=true;
		for (var attr in json){
			if(!obj.speed)obj.speed={};
			if(!obj.speed[attr])obj.speed[attr]=0;
			now=parseInt(getStyle(obj,attr));
			if(Math.abs(json[attr]-now)>1 || Math.abs(obj.speed[attr])>1){
				bStop=false;
				obj.speed[attr]+=(json[attr]-now)/5;
				obj.speed[attr]*=0.85;
				var MaxSpeed=65;
				if(Math.abs(obj.speed[attr])>MaxSpeed){
					obj.speed[attr]=obj.speed[attr]>0?MaxSpeed:-MaxSpeed;
				};
				obj.style[attr]=now+obj.speed[attr]+'px';
			};
		};
		if(bStop){
			clearInterval(obj.timer);
			obj.style[attr]=json[attr]+'px';
			if(fnEnd)fnEnd();
		};
	}, 30);
}
function setqq(obj,num){
	if (obj.length!=num.length){
		alert('\nspan的个数与QQ号码的个数不符，请设置5个QQ号码!\n\n[设置未成功!]');
		return;
	}else{
		for (var i=0; i<num.length; i++){
			obj[i].innerHTML = "<a target='_blank' href='http://wpa.qq.com/msgrd?v=3&uin="+num[i]+"&site=qq&menu=yes'><img border='0' src='http://wpa.qq.com/pa?p=2:"+num[i]+":51' alt='点击咨询' title='点击咨询'/></a>";
		};
	};
};
function settop(id,id2,top){
	var obj = document.getElementById(id);
	var box = document.getElementById(id2);
	obj.style.top = box.style.top = top+'px';
};
function dealy(id,time){
	var obj = document.getElementById(id);
	var timer = setTimeout(function(){
		Flexing(obj,{right:-100});
	},time*1000);
};
function click_fn(id,id2){
	var obj = document.getElementById(id);
	var box = document.getElementById(id2);
	obj.onclick = function(){
		Running(obj,{right:-200},function(){
			box.style.display = 'block';
			Running(box,{right:10, opacity:100});					
		});
	};
	box.onclick = function(){
		timer = setTimeout(function(){
			Running(box,{right:-220,opacity:0},function(){
				box.style.display = 'none';
				Flexing(obj,{right:-100});
			});			
		},3000);
	};
};
</script>
<div id= 'qq_icon'></div>
<div id='cs_online'>
	<ul class='qq_context'>
		<li>
			<span class='span_t'>在线客服01：</span>
			<span class='qq_num'></span>
		</li>
		<li>
			<span class='span_t'>在线客服02：</span>
			<span class='qq_num'></span>
		</li>
		<li>
			<span class='span_t'>在线客服03：</span>
			<span class='qq_num'></span>
		</li>
		<li>
			<span class='span_t'>在线客服04：</span>
			<span class='qq_num'></span>
		</li>
		<li>
			<span class='span_t'>在线客服05：</span>
			<span class='qq_num'></span>
		</li>

</div>
</div>
<script type="text/javascript">
myEvent(window,'load',function(){
dealy('qq_icon',2);//2秒后显示QQ图标，默认为2秒，可自行设置
settop('qq_icon','cs_online',150);//设置在线客服的高度，默认150，可自行设置
var span_q = getbyClass('cs_online','qq_num');
setqq(span_q,['800020304','800020304','800020304','800020304','800020304']);//填写5个QQ号码
click_fn('qq_icon','cs_online');
});
</script>
</div>
</body>
</html>

CSS代码

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

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

QQ在线客服：缓冲向左弹出的网页右侧边栏Qq客服代码

分类

网站常用

描述

又一款新颖的QQ客服代码，平时是隐藏在网页右侧，只显示出一个大大的QQ头像，当鼠标点击时候，才会展开显示QQ客服各个号码，可对每个客服号码加一个简短的描述，比如：销售、售后、售前等。适合用于企业网站的QQ客服。