最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

简洁右侧栏客服代码

来源:http://www.erdangjiade.com/ 沐浴春风 2015-05-12 08:15浏览(1603)

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

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

简洁右侧栏客服代码
分类:其它特效 > 在线客服 难易:初级
查看演示

加我微信,拉你进VIP群学习:

下载资源 下载积分: 30 积分

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();
})
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/114.html
评论1
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 沙发
    07-03 17:54
    kksoft
    特效,样式都很不错
1 2