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

1、引用jquery.min.js

2、JS代码

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

function getClass(oParent,sClass)
{
	var value=[];
	var Ele=oParent.getElementsByTagName('*');
	for (var i=0; i0?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、网页代码

    

        关闭窗口
        
在线客服
        

            
                
            
                
            
                
        
        

            
        
        

            微信扫一扫

            电商资讯全知晓
        
        

            
售前咨询热线
            
021-88888888
            
021-88888888
            
售后咨询热线
            
021-88888888
        
    

效果如下图