带上下箭头的在线客服js代码

    带上下箭头的在线客服js代码，点击上箭头往上滚动，点击下箭头往下滚动，点击关闭按钮会收起来，再次点击会展开。鼠标浮动到功能按钮，会从侧边弹出相关功能。如电话号码、留言板、电子邮件等。 1、引入css

<link href="./css/qq_sidebar.css" rel="stylesheet" type="text/css" />

2、加入html

<div id="onService_panel" class="qq_onService_panel">
    <div class="sidebar2_Mo">
        <div class="sidebar2_list">
            <div class="sidebar2_listT ie_w">
                <div class="list_c"></div>
            </div>
            <div class="sidebar2_listC">
                <a id="prev_btn" class="prev_btn" href="###">
                    <img src="./images/prev_icon.png">
                </a>
                <ul class="function_list">
                    <!---电话-->
                    <li class="list">
                        <a class="tel_icon" href="###"></a>
                        <div class="lxwm_tel alt_c" style="right: -178px; opacity: 0;">
                            <div class="sidebar2_listT">
                                <div class="list_c"></div>
                            </div>
                            <div class="lxwm_c alt_bg">
                                <h2 class="lxwm_tit">电话直呼</h2>
                                <ul class="lxwm_list clearfix">
                                    <li>13888888888</li>
                                </ul>
                            </div>
                            <div class="sidebar2_listB">
                                <div class="list_c"></div>
                            </div>
                        </div>
                    </li>
                    <!---QQ-->
                    <!---二维码-->
                    <li class="list">
                        <a class="edit_icon" href="###"></a>
                        <div class="explain_text alt_c" style="right: -106px; opacity: 0;">
                            <div class="sidebar2_listT">
                                <div class="list_c"></div>
                            </div>
                            <div class="explain_c alt_bg">
                                <a href="http://www.5imoban.net/plus/guestbook.php">
                                <em>在线留言</em></a>
                            </div>
                            <div class="sidebar2_listB">
                                <div class="list_c"></div>
                            </div>
                        </div>
                    </li>
                    <!-- 发送邮件 -->
                    <li class="list">
                        <a class="mail_icon" href="###"></a>
                        <div class="explain_text alt_c" style="right: -106px; opacity: 0;">
                            <div class="sidebar2_listT">
                                <div class="list_c"></div>
                            </div>
                            <div class="explain_c alt_bg">
                                <a href="mailto:1977600311@qq.com"><em>发送邮件</em></a>
                            </div>
                            <div class="sidebar2_listB">
                                <div class="list_c"></div>
                            </div>
                        </div>
                    </li>
                </ul>
                <a id="next_btn" class="next_btn" href="###">
                    <img src="./images/next_icon.png">
                </a>
            </div>
            <div class="sidebar2_listB ie_w">
                <div class="list_c"></div>
            </div>
        </div>
        <div class="sidebar2_state">
            <a id="state_btn" href="###" class=""></a>
        </div>
    </div>
</div>

3、引入jQuery库和js

<script src="./js/jquery.1.11.3.js"></script>
<script src="./js/qq_sidebar.js"></script>