138-2322-3182

右侧悬浮客服咨询条源码下载

发布时间:2019-03-18 15:03:02发布者:金格网络

  右侧悬浮客服咨询条样例图

  营销型网站必须得带有右侧悬浮客服咨询条,方便客户咨询、提问,促进转化。

  下面提供一个右侧悬浮咨询条给大家参考,带在线咨询、微信二维码、qq、售后咨询,返回顶部,可直接复制使用,或者翻到文章底部可下载整个源码,有不懂的可以在线咨询我哟!

css部分:

a{ text-decoration:none;color:#333;}
/* 右侧悬浮客服 */
.side{position:fixed;width:78px;right:0;top:50%; margin-top:-200px;z-index:100; border:1px solid #e0e0e0; background:#ffffff; border-bottom:0; display:none;}
.side ul li{width:78px;height:78px;float:left;position:relative; border-bottom:1px solid #e0e0e0;color:#333; font-size:14px; line-height:38px; text-align:center;transition:all 0.3s; cursor:pointer;}
.side ul li:hover{background:#f67524; color:#fff;}
.side ul li:hover a{ color:#fff;}
.side ul li i{height:25px; margin-bottom:1px; display:block; overflow:hidden; background-repeat:no-repeat; background-position:center center; background-size:auto 25px; margin-top:14px;transition:all 0.3s;}
.side ul li i.bgs2{ background-image:url(images/r_pic7.png);}
.side ul li i.bgs3{ background-image:url(images/r_pic2.png);}
.side ul li i.bgs4{ background-image:url(images/r_pic1.png);}
.side ul li i.bgs5{ background-image:url(images/r_pic3.png);}
.side ul li i.bgs6{ background-image:url(images/r_pic6_on.png);}
.side ul li:hover i.bgs2{background-image:url(images/r_pic7_on.png);}
.side ul li:hover i.bgs3{background-image:url(images/r_pic2_on.png);}
.side ul li:hover i.bgs4{background-image:url(images/r_pic1_on.png);}
.side ul li:hover i.bgs5{background-image:url(images/r_pic3_on.png);}
.side ul li:hover i.bgs6{}
.side ul li .sidebox{position:absolute;width:78px;height:78px;top:0;right:0;transition:all 0.3s;overflow:hidden;}
.side ul li.sidetop{background:#f67524; color:#fff;display:none;}
.side ul li.sidetop:hover{opacity:0.8;filter:Alpha(opacity=80);}
.side ul li.sideewm .ewBox {
  width: 238px;
  display: none;
  color: #363636;
  text-align: center;
  padding-top: 235px;
  position: absolute;
  left: -240px;
  top: 0px;
  background-image: url('images/r_ewm.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  border:1px solid #e0e0e0;
}
.side ul li.sideetel .telBox {
   width: 240px;
  height:237px;
  display: none;
  color: #fff;
  text-align: left;
  position: absolute;
  left: -240px;
  top: -79px;
  background:#f67524;
}
.side ul li.sideetel .telBox dd{ display:block; height:118.5px; overflow:hidden; padding-left:82px; line-height:24px; font-size:18px;}
.side ul li.sideetel .telBox dd span{ display:block; line-height:28px; height:28px; overflow:hidden; margin-top:32px; font-size:18px;}
.side ul li.sideetel .telBox dd.bgs1{ background:url(images/r_pic8.png) 28px center no-repeat; background-color:#e96410;}
.side ul li.sideetel .telBox dd.bgs2{ background:url(images/r_pic9.png) 28px center no-repeat;}
@media screen and (max-width:1440px) {
.side{width:62px; margin-top:-158px;}
.side ul li{width:62px;height:62px;font-size:12px; line-height:30px;}
.side ul li i{height:20px; background-size:auto 20px; margin-top:11px;}
.side ul li.sideewm .ewBox { padding-top:187px; width:192px; left:-194px; background-size:cover;}
.side ul li.sideetel .telBox { height:189px;top: -63px;}
.side ul li.sideetel .telBox dd{ height:94.5px; font-size:16px;}
.side ul li.sideetel .telBox dd span{ margin-top:21px; font-size:16px;}
}

html部分:

<!-- 右侧客服 -->
<div class="side">
 <ul>
  <li class="shangqiao"><a href="javascript:void(0)" target="_blank" title="在线咨询" rel="nofollow"><div><i class="bgs2"></i>在线咨询</div></a></li>
  <li class="sideewm"><i class="bgs3"></i>微信咨询<div class="ewBox"></div></li>
  <li class="sideetel"><i class="bgs4"></i>联系电话
   <div class="telBox">
    <dd class="bgs1"><span>座机</span>0755-88888888</dd>
    <dd class="bgs2"><span>手机</span>13800 138000</dd>
   </div>
  </li>
  <li id="yuyueshow"><i class="bgs5"></i>售后服务</li>
  <li class="sidetop" onclick="goTop()"><i class="bgs6"></i>返回顶部</li>
 </ul>
</div>

js部分:

<script type="text/javascript"> 
$('.sideewm').hover(function(){
 $('.ewBox').stop().fadeIn();
},function(){
 $('.ewBox').stop().fadeOut();
});
$('.sideetel').hover(function(){
 $('.telBox').stop().fadeIn();
},function(){
 $('.telBox').stop().fadeOut();
});
$(window).scroll(function(){
 if($(window).scrollTop()>180){
  $('.side').show(600);
 }else{
  $('.side').hide(600);
  $('.sidetop').hide();
 }
 if($(window).scrollTop()>1000){
  $('.sidetop').show();
 }
});
//回到顶部
function goTop(){
 $('html,body').animate({'scrollTop':0},600); //滚回顶部的时间,越小滚的速度越快~
}
</script>

下载源码 →