简洁右侧栏客服代码

今天介绍一款客服代码，主要功能有微信、QQ、电话显示及返回顶部功能。

分类：其它特效 > 在线客服难易：初级

查看演示下载资源下载积分： 20 积分

HTML

首先我们在#service放置微信、QQ、电话及返回顶部四个按钮。

<div id="service">
    <ul>
        <li>
            <a href="javascript:void(0)" class="weixin_area">
                <img src="images/l02.png" width="47" height="49" class="shows" />
                <img src="images/a.png" width="57" height="49" class="hides" />
                <img src="images/weixin.jpg" width="145" class="weixin" style="display:none;margin:-100px 57px 0 0" />
            </a>
        </li>
        <li>
            <a href="http://wpa.qq.com/msgrd?v=3&uin=800022936&site=qq&menu=yes" target="_blank">
                <div class="hides" style="width:161px;display:none;" id="qq">
                    <div class="hides" id="p1">
                        <img src="images/ll04.png">
                    </div>
                    <div class="hides" id="p2"><span style="color:#FFF;font-size:13px">800022936</span>
                    </div>
                </div>
                <img src="images/l04.png" width="47" height="49" class="shows" />
            </a>
        </li>
        <li id="tel">
            <a href="javascript:void(0)">
                <div class="hides" style="width:161px;display:none;" id="tels">
                    <div class="hides" id="p1">
                        <img src="images/ll05.png">
                    </div>
                    <div class="hides" id="p3"><span style="color:#FFF;font-size:12px">0551-65371998</span>
                    </div>
                </div>
                <img src="images/l05.png" width="47" height="49" class="shows" />
            </a>
        </li>
        <li id="btn">
            <a id="top_btn">
                <div class="hides" style="width:161px;display:none">
                    <img src="images/ll06.png" width="161" height="49" />
                </div>
                <img src="images/l06.png" width="47" height="49" class="shows" />
            </a>
        </li>
    </ul>
</div>

jQuery

鼠标悬浮各个按钮及离开代码：

$("#service a").hover(function() {
    if ($(this).prop("className") == "weixin_area") {
        $(this).children("img.hides").show();
    } else {
        $(this).children("div.hides").show();
        $(this).children("img.shows").hide();
        $(this).children("div.hides").animate({
            marginRight: '0px'
        },
        '0');
    }
},
function() {
    if ($(this).prop("className") == "weixin_area") {
        $(this).children("img.hides").hide();
    } else {
        $(this).children("div.hides").animate({
            marginRight: '-163px'
        },
        0,
        function() {
            $(this).hide();
            $(this).next("img.shows").show();
        });
    }
});

返回顶部代码：

$("#top_btn").click(function() {
    $("html,body").animate({scrollTop: 0}, 600);
});

鼠标悬浮微信上方和离开代码：

$(".weixin_area").hover(function() {
    $(this).children(".weixin").show();
},function(){
    $(this).children(".weixin").hide();
})