特效介绍
带上下箭头的在线客服js代码，点击上箭头往上滚动，点击下箭头往下滚动，点击关闭按钮会收起来，再次点击会展开。鼠标浮动到功能按钮，会从侧边弹出相关功能。如电话号码、留言板、电子邮件等。
使用方法
1、引入css
1 | <link href="./css/qq_sidebar.css" rel="stylesheet" type="text/css" /> |
01 | <div id="onService_panel" class="qq_onService_panel"> |
02 | <div class="sidebar2_Mo"> |
03 | <div class="sidebar2_list"> |
04 | <div class="sidebar2_listT ie_w"> |
05 | <div class="list_c"></div> |
06 | </div> |
07 | <div class="sidebar2_listC"> |
08 | <a id="prev_btn" class="prev_btn" href="###"> |
09 | <img src="./images/prev_icon.png"> |
10 | </a> |
11 | <ul class="function_list"> |
12 | <!---电话--> |
13 | <li class="list"> |
14 | <a class="tel_icon" href="###"></a> |
15 | <div class="lxwm_tel alt_c" style="right: -178px; opacity: 0;"> |
16 | <div class="sidebar2_listT"> |
17 | <div class="list_c"></div> |
18 | </div> |
19 | <div class="lxwm_c alt_bg"> |
20 | <h2 class="lxwm_tit">电话直呼</h2> |
21 | <ul class="lxwm_list clearfix"> |
22 | <li>13888888888</li> |
23 | </ul> |
24 | </div> |
25 | <div class="sidebar2_listB"> |
26 | <div class="list_c"></div> |
27 | </div> |
28 | </div> |
29 | </li> |
30 | <!---QQ--> |
31 | <!---二维码--> |
32 | <li class="list"> |
33 | <a class="edit_icon" href="###"></a> |
34 | <div class="explain_text alt_c" style="right: -106px; opacity: 0;"> |
35 | <div class="sidebar2_listT"> |
36 | <div class="list_c"></div> |
37 | </div> |
38 | <div class="explain_c alt_bg"> |
39 | <a href="http://www.5imoban.net/plus/guestbook.php"> |
40 | <em>在线留言</em></a> |
41 | </div> |
42 | <div class="sidebar2_listB"> |
43 | <div class="list_c"></div> |
44 | </div> |
45 | </div> |
46 | </li> |
47 | <!-- 发送邮件 --> |
48 | <li class="list"> |
49 | <a class="mail_icon" href="###"></a> |
50 | <div class="explain_text alt_c" style="right: -106px; opacity: 0;"> |
51 | <div class="sidebar2_listT"> |
52 | <div class="list_c"></div> |
53 | </div> |
54 | <div class="explain_c alt_bg"> |
55 | <a href="mailto:1977600311@qq.com"><em>发送邮件</em></a> |
56 | </div> |
57 | <div class="sidebar2_listB"> |
58 | <div class="list_c"></div> |
59 | </div> |
60 | </div> |
61 | </li> |
62 | </ul> |
63 | <a id="next_btn" class="next_btn" href="###"> |
64 | <img src="./images/next_icon.png"> |
65 | </a> |
66 | </div> |
67 | <div class="sidebar2_listB ie_w"> |
68 | <div class="list_c"></div> |
69 | </div> |
70 | </div> |
71 | <div class="sidebar2_state"> |
72 | <a id="state_btn" href="###" class=""></a> |
73 | </div> |
74 | </div> |
75 | </div> |
1 | <script src="./js/jquery.1.11.3.js"></script> |
2 | <script src="./js/qq_sidebar.js"></script> |