右侧QQ和微信在线客服悬浮代码

特效描述：基于jquery实现 微信二维码 QQ客服，基于jquery实现带微信二维码QQ客服代码

代码部署教程

1. 引入CSS

<link rel=”stylesheet” href=”css/index.css” type=”text/css” media=”screen” />

2. 引入JS

<script type=”text/javascript” src=”js/jquery-1.7.2.min.js”></script>

3. HTML代码

<div class=”service_box”>
<ul class=”tab_nav”>
<li><a href=”http://cxvn.com”><i class=”icon icon_1″></i>在线客服</a></li>
<li><a href=”http://cxvn.com”><i class=”icon icon_3″></i></a></li>
</ul>
<div class=”tab_content”>
<div class=”tab_plan”>
<p class=”fs14″>在线客服1:<br />
<a target=”_blank” href=”http://www.cxvn.com/msgrd?v=3&amp;uin=123456789&amp;site=qq&amp;menu=yes” class=”qq_link”><img border=”0″ src=”http://www.cxvn.com/pa?p=2:2833026848:51″ alt=”点击这里给我发消息” title=”点击这里给我发消息”></a></p>
<p class=”fs14 mt10″>在线客服2:<br />
<a target=”_blank” href=”http://www.cxvn.com/msgrd?v=3&amp;uin=123456789&amp;site=qq&amp;menu=yes” class=”qq_link”><img border=”0″ src=”http://www.cxvn.com/pa?p=2:123456789:51″ alt=”点击这里给我发消息” title=”点击这里给我发消息”></a></p>
<p class=”fs14 mt10″>商务客服:<br />
<a target=”_blank” href=”http://www.cxvn.com/msgrd?v=3&amp;uin=123456789&amp;site=qq&amp;menu=yes” class=”qq_link”><img border=”0″ src=”http://www.cxvn.com/pa?p=2:2833026848:51″ alt=”点击这里给我发消息” title=”点击这里给我发消息”></a></p>
<p class=”mt10″>服务时间:<br />
9:00-18:00(工作日)<br />
</p>
</div>
<div class=”tab_plan” style=”display: none;”><img src=”images/weixin.jpg” alt=”官方微信自助客服” width=”130″ height=”130″>
<p>扫一扫关注站长素材</p>
</div>
</div>
</div>
<script type=”text/javascript”>
$(“.service_box .tab_nav li”).hover(function(){
var i=$(this).index();
$(this).addClass(“active”).siblings().removeClass(“active”);
$(“.service_box .tab_plan:eq(“+i+”)”).show().siblings().hide();
});
$(function(){
var t;
$(“.service_box”).hover(function(){
$(“.service_box”).animate({right:0},300)
clearTimeout(t);
},function(){
t=setTimeout(function(e){
$(“.service_box”).animate({right:”-146px”},300);
$(“.service_box”).find(“.tab_nav li”).removeClass(“active”);
},1000);
});
});
var isTransition=true;
$(“.m_logo”).hover(function(){
var r=0;
if(isTransition){
animateTime = setInterval(function(){
if (r>=153){
clearInterval(animateTime);
isTransition=true;
}else{
isTransition=false;
r++;
$(“.m_logo a”).attr(“style”,”-webkit-mask:-webkit-gradient(radial, 45 25, “+r+”, 45 25, “+(r+15)+”, from(rgb(0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.2)), to(rgb(0, 0, 0)));”)
};
},5);
}
},function(){
return;
});
</script>
<!–[if lt IE 7]>
<script type=”text/javascript”>
window.onscroll = function(){
doc_scroll();
};
var doc_scroll = function(){
var height = document.documentElement.clientHeight – 90 ;
var scroll_top = $(document).scrollTop() ;
$(“.service_box”).css({
“top” : height + scroll_top – 74
});
};
doc_scroll();
</script>
<![endif]–>
<div style=”text-align:center;margin:50px 0; font:normal 14px/24px ‘MicroSoft YaHei’;”>
</div>

下载地址

立即下载