分享一个可展开收缩的右侧悬浮QQ在线客服代码

顶 0 踩

分享一个用JQuery 实现的可展开收缩的右侧悬浮QQ在线客服代码 
源代码见附件 
在线演示：  www.cslou.com 
转载请注明出处　本代码仅限于学习交流，请勿用于商业用途!   

标签： jQuery

代码片段(3)

[文件] 可展开收缩的悬浮QQ在线客服代码.rar ~ 68KB    下载(423)

[代码] [JavaScript]代码

view source

print ?

01	<div id="floatTools" class="float0831">

02	<div class="floatL">

03

<a title="查看在线客服" class="btnOpen" id="aFloatTools_Show" style="display: none;"onclick="javascript:$('#divFloatToolsView').animate({width: 'show', opacity: 'show'}, 'normal',function(){ $('#divFloatToolsView').show(); });$('#aFloatTools_Show').attr('style','display:none');$('#aFloatTools_Hide').attr('style','display:block');"href="javascript:void(0);">展开</a>

04

<a title="关闭在线客服" class="btnCtn" id="aFloatTools_Hide" style="display: block;"onclick="javascript:$('#divFloatToolsView').animate({width: 'hide', opacity: 'hide'}, 'normal',function(){ $('#divFloatToolsView').hide(); });$('#aFloatTools_Show').attr('style','display:block');$('#aFloatTools_Hide').attr('style','display:none');"href="javascript:void(0);">收缩</a>

05

</div>

06	<div id="divFloatToolsView" class="floatR">

07	<div class="tp"></div>

08	<div class="cn">

09

<ul>

10	<li class="top">

11	<h3 class="titZx">

12

QQ咨询

13

</h3>

14

</li>

15

<li>

16	<span class="icoZx">在线咨询</span>

17

</li>

18

<li>

19	<a class="qqOn" target="_blank"href="http://wpa.qq.com/msgrd?v=3&uin=2278808484&site=qq&menu=yes"><img border="0"src="http://wpa.qq.com/pa?p=2:2278808484:41 &r=0.8940031429092906"></a>

20

</li>

21

<li>

22	<a class="qqOn" target="_blank"href="http://wpa.qq.com/msgrd?v=3&uin=954149011&site=qq&menu=yes"><img border="0"src="http://wpa.qq.com/pa?p=2:954149011:41 &r=0.8940031429092906"></a>

23

</li>

24

</ul>

25

<ul>

26

<li>

27	<h3 class="titDh">

28

电话咨询

29

</h3>

30

</li>

31

<li>

32	<span class="icoTl">400-000-000</span>

33

</li>

34	<li class="bot">

35	<h3 class="titDc">

36	<a href="http://www.cslou.com/" target="_blank">新版调查</a>

37

</h3>

38

</li>

39

</ul>

40

</div>

41

</div>

42

</div>