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

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
==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,'headline');
var closed='关闭窗口';
var opened='客户服务';
var i=1;

oTitle[0].onclick=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>

效果如下图