一款简单的右侧客服代码（带二维码扫描图）

1、引用jquery.min.js

2、JS代码

//-------在线客服

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.οnlοad=function()
{
	var oBox=document.getElementById('box');
	var oTitle=getClass(oBox,'headline');
	var closed='关闭窗口';
	var opened='客户服务';
	var i=1;
	
	oTitle[0].οnclick=function()
	{
		i++;
		(i%2)?Running(oBox,{right:0},function()
		{
			oTitle[0].innerHTML=closed;			
		})
		:Running(oBox,{right:-120},function()
		{
			oTitle[0].innerHTML=opened;
		});	
	}
}

3、CSS代码

/*-----在线客服------*/
#box{ width:120px; height:360px; background:#f0eeef; position:fixed; top:200px; right:0px;text-align:center; z-index:999;}
.headline{ width:25px; height:100px; font-size:14px; position:absolute; left:-27px; background:#0494cd; top:0px; color:white; line-height:22px; text-align:center; border:1px solid #006d98; vertical-align:middle; border-radius:3px 0 0 3px; cursor:pointer; padding-top:10px;}
.theme{ color:#fff; display:block; margin:5px 10px; font-weight:bold; font-size:16px;}

#box p{ padding:10px; font-size:14px; border:1px solid #ddd; border-top:none;}
.txt{ width:auto; height:22px; display: block; font-size:12px; line-height:22px;}
.active{ background:#ff6600;}
.qq{ width:118px; text-align:center; padding:15px 0; border:1px solid #ddd; border-bottom:none;}
.weixin{ background:#fff; border:1px solid #e2e2e2; width:118px; padding:8px 0;}

#box h3{ background:#0590cb; height:36px; color:#fff; font-size:16px; font-weight:bold; line-height:36px; }
#box dl{ background:#0590cb; color:#fff; padding:5px 10px 15px 10px; text-align:left;}
#box dl dt{ font-weight:bold; font-size:14px; padding-top:10px; }
#box dl dd{ font-size:14px;  }

4、网页代码

    <div id="box" style="right: 0px;">
        <span class="headline">关闭窗口</span>
        <h3>在线客服</h3>
        <div class="qq">
            <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=88888888&site=qq&menu=yes">
                <img border="0" src="http://wpa.qq.com/pa?p=2:2105535328:51" alt="点击这里给我发消息" title="点击这里给我发消息"></a>
            <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=88888888&site=qq&menu=yes">
                <img border="0" src="http://wpa.qq.com/pa?p=2:5655208:51" alt="点击这里给我发消息" title="点击这里给我发消息"></a>
            <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=88888888
&site=qq&menu=yes">
                <img border="0" src="http://wpa.qq.com/pa?p=2:2105535328
:51"
                    alt="点击这里给我发消息" title="点击这里给我发消息"></a>
        </div>
        <div class="weixin">
            <img src="/Public/Images/weixin.png"><!--微信二维码-->
        </div>
        <p>
            微信扫一扫<br>
            电商资讯全知晓
        </p>
        <dl class="number">
            <dt>售前咨询热线</dt>
            <dd>021-88888888</dd>
            <dd>021-88888888</dd>
            <dt>售后咨询热线</dt>
            <dd>021-88888888</dd>
        </dl>
    </div>

效果如下图