html5 右侧客服代码,简洁右侧栏客服代码

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

查看演示

下载资源：

613

次 下载资源

下载积分：

20

积分

HTML

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

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();

})