一款使用jquery来制作的可隐藏的在线QQ客服面板效果。该QQ客服面板会固定在页面的右侧，并且可以通过点击箭头按钮进行隐藏，适合用于应用在各种需要QQ客服的网站上。

使用方法
在页面中引入jquery.min.js文件。

	
	

		
		

			
			

				
				

					
					

						
						

							1
						

					

					

						
						

							
							

								<script src="js/jquery.min.js"></script>
							

						

					

				

			

		

	


HTML结构
该在线QQ客服面板的HTML结构如下：

	
	

		
		

			
			

				
				

					
					

						
						

							1
						

						

							2
						

						

							3
						

						

							4
						

						

							5
						

						

							6
						

						

							7
						

						

							8
						

						

							9
						

						

							10
						

						

							11
						

						

							12
						

						

							13
						

						

							14
						

						

							15
						

						

							16
						

						

							17
						

						

							18
						

						

							19
						

						

							20
						

						

							21
						

						

							22
						

						

							23
						

						

							24
						

						

							25
						

						

							26
						

						

							27
						

						

							28
						

						

							29
						

					

					

						
						

							
							

								<divid="rightArrow"><ahref="javascript:;"title="在线客户"></a></div>
							

							

								<divid="floatDivBoxs">
							

							

								  <divclass="floatDtt">在线客服</div>
							

							

								    <divclass="floatShadow">
							

							

								        <ulclass="floatDqq">
							

							

								            <listyle="padding-left:0px;">
							

							

								              <atarget="_blank"href="tencent://message/?uin=1234567890&Site=sc.chinaz.com&Menu=yes">
							

							

								                <imgsrc="images/qq.png"align="absmiddle">  在线客服1号
							

							

								              </a>
							

							

								            </li>
							

							

								            <listyle="padding-left:0px;">
							

							

								              <atarget="_blank"href="tencent://message/?uin=1234567890&Site=sc.chinaz.com&Menu=yes">
							

							

								                <imgsrc="images/qq.png"align="absmiddle">  在线客服1号
							

							

								              </a>
							

							

								            </li>
							

							

								            <listyle="padding-left:0px;">
							

							

								              <atarget="_blank"href="tencent://message/?uin=1234567890&Site=sc.chinaz.com&Menu=yes">
							

							

								                <imgsrc="images/qq.png"align="absmiddle">  在线客服1号
							

							

								              </a>
							

							

								            </li>
							

							

								        </ul>
							

							

								        <divclass="floatDtxt">热线电话</div>
							

							

								        <divclass="floatDtel"><imgsrc="images/online_phone.jpg"width="155"height="45"alt=""></div>
							

							

								        <divstyle="text-align:center;padding:10PX 0 5px 0;background:#EBEBEB;">
							

							

								        <imgsrc="images/wap_ico.jpg">
							

							

								        <br>微信公众账号</div>
							

							

								    </div>
							

							

								    <divclass="floatDbg"></div>
							

							

								</div>       
							

						

					

				

			

		

	


CSS样式
为在线QQ客服面板添加下面的CSS样式。

	
	

		
		

			
			

				
				

					
					

						
						

							1
						

						

							2
						

						

							3
						

						

							4
						

						

							5
						

						

							6
						

						

							7
						

						

							8
						

						

							9
						

						

							10
						

						

							11
						

						

							12
						

						

							13
						

						

							14
						

						

							15
						

						

							16
						

						

							17
						

						

							18
						

						

							19
						

						

							20
						

						

							21
						

						

							22
						

						

							23
						

						

							24
						

						

							25
						

						

							26
						

						

							27
						

						

							28
						

						

							29
						

						

							30
						

						

							31
						

						

							32
						

						

							33
						

						

							34
						

						

							35
						

						

							36
						

						

							37
						

						

							38
						

						

							39
						

						

							40
						

						

							41
						

						

							42
						

						

							43
						

						

							44
						

						

							45
						

						

							46
						

						

							47
						

						

							48
						

						

							49
						

						

							50
						

						

							51
						

						

							52
						

						

							53
						

						

							54
						

						

							55
						

						

							56
						

						

							57
						

						

							58
						

						

							59
						

						

							60
						

						

							61
						

						

							62
						

						

							63
						

						

							64
						

						

							65
						

						

							66
						

						

							67
						

						

							68
						

						

							69
						

						

							70
						

						

							71
						

						

							72
						

					

					

						
						

							
							

								#floatDivBoxs {
							

							

								    width:170px;
							

							

								    background:#fff;
							

							

								    position:fixed;
							

							

								    top:180px;
							

							

								    right:0;
							

							

								    z-index:999;
							

							

								}
							

							

								 
							

							

								#floatDivBoxs .floatDtt {
							

							

								    width:100%;
							

							

								    height:45px;
							

							

								    line-height:45px;
							

							

								    background:#f08326;
							

							

								    color:#fff;
							

							

								    font-size:18px;
							

							

								    text-indent:22px;
							

							

								    position:relative;
							

							

								}
							

							

								 
							

							

								#floatDivBoxs .floatDqq {
							

							

								    padding:014px;
							

							

								}
							

							

								 
							

							

								#floatDivBoxs .floatDqq li {
							

							

								    height:45px;
							

							

								    line-height:45px;
							

							

								    font-size:15px;
							

							

								    border-bottom:1pxsolid#e3e3e3;
							

							

								    padding:00050px;
							

							

								}
							

							

								 
							

							

								#floatDivBoxs .floatDtxt {
							

							

								    font-size:18px;
							

							

								    color:#333;
							

							

								    padding:12px14px;
							

							

								}
							

							

								 
							

							

								#floatDivBoxs .floatDtel {
							

							

								    padding:0015px10px;
							

							

								}
							

							

								 
							

							

								#floatDivBoxs .floatDtel img {
							

							

								    display:block;
							

							

								}
							

							

								 
							

							

								#floatDivBoxs .floatDbg {
							

							

								    width:100%;
							

							

								    height:20px;
							

							

								    background:url(../images/online_botbg.jpg)no-repeat;
							

							

								    box-shadow:-2px03pxrgba(0,0,0,0.25);
							

							

								}
							

							

								 
							

							

								.floatShadow {
							

							

								    background:#fff;
							

							

								    box-shadow:-2px03pxrgba(0,0,0,0.25);
							

							

								}
							

							

								 
							

							

								#rightArrow {
							

							

								    width:50px;
							

							

								    height:45px;
							

							

								    background:url(../images/online_arrow.jpg)no-repeat;
							

							

								    position:fixed;
							

							

								    top:180px;
							

							

								    right:170px;
							

							

								    z-index:999;
							

							

								}
							

							

								 
							

							

								#rightArrow a {
							

							

								    display:block;
							

							

								    height:45px;
							

							

								}                 
							

						

					

				

			

		

	


JavaScript
在页面DOM元素加载完毕之后，使用下面的jquery代码来隐藏和展示在线QQ客服面板。

	
	

		
		

			
			

				
				

					
					

						
						

							1
						

						

							2
						

						

							3
						

						

							4
						

						

							5
						

						

							6
						

						

							7
						

						

							8
						

						

							9
						

						

							10
						

						

							11
						

						

							12
						

						

							13
						

						

							14
						

					

					

						
						

							
							

								varflag=1;
							

							

								$('#rightArrow').click(function(){
							

							

								  if(flag==1){
							

							

								    $("#floatDivBoxs").animate({right:'-175px'},300);
							

							

								    $(this).animate({right:'-5px'},300);
							

							

								    $(this).css('background-position','-50px 0');
							

							

								    flag=0;
							

							

								  }else{
							

							

								    $("#floatDivBoxs").animate({right:'0'},300);
							

							

								    $(this).animate({right:'170px'},300);
							

							

								    $(this).css('background-position','0px 0');
							

							

								    flag=1;
							

							

								  }
							

							

								});