实用资源简单实用的企业网站右侧在线客服代码

简单实用的企业网站右侧在线客服代码

企业网站一般会在网页右侧放一个在线客服,用户通过客服QQ可以直接联系,本文分享的这款在线客服代码,默认贴边隐藏,用户点击按钮后展开,再点击可以恢复隐藏,比较简单实用:

网页在线客服.gif

CSS部分代码
ul,li,h3 { margin:0;padding:0;}
img{ border:0;}
.rides-cs { font-size:12px;background:#29a7e2;position:fixed;top:250px;right:0px;z-index:1500;border-radius:6px 0px 0 6px;}
.rides-cs a { color:#00a0e9;}
.rides-cs a:hover { color:#ff8100;text-decoration:none;}
.rides-cs .floatl { width:36px;float:left;position:relative;z-index:1;margin-top:21px;height:181px;}
.rides-cs .floatl a { font-size:0;text-indent:-999em;display:block;}
.rides-cs .floatr { width:130px;float:left;padding:5px;overflow:hidden;}
.rides-cs .floatr .cn {background:#f7f7f7;border-radius:6px;margin-top:4px;}
.rides-cs .cn .titzx{ font-size:14px;color:#333;font-weight:600;line-height:24px;padding:5px;text-align:center;}
.rides-cs .cn ul {padding:0px;list-style:none;}
.rides-cs .cn ul li { line-height:38px;height:38px;border-bottom:solid 1px #e6e4e4;overflow:hidden;text-align:center;}
.rides-cs .cn ul li span { color:#777;}
.rides-cs .cn ul li a{color:#777;}
.rides-cs .cn ul li img { vertical-align:middle;}
.rides-cs .btnopen, .rides-cs .btnctn { position:relative;z-index:9;top:25px;left:0; background-image:url(bg.png);background-repeat:no-repeat;display:block; height:146px;padding:8px;}
.rides-cs .btnopen { background-position:0 0;}
.rides-cs .btnctn { background-position:-37px 0;}
.rides-cs ul li.top { border-bottom:solid #ace5f9 1px;}
.rides-cs ul li.bot { border-bottom:none;}
body部分代码
<div id="floattools" class="rides-cs" style="height:246px;">
 <div class="floatl">
  <a id="afloattools_show" class="btnopen" title="查看在线客服" style="top:20px;display:block" href="javascript:void(0);">展开</a>
  <a id="afloattools_hide" class="btnctn" title="关闭在线客服" style="top:20px;display:none" href="javascript:void(0);">收缩</a>
 </div>
 <div id="divfloattoolsview" class="floatr" style="display:none;height:237px;width:140px;">
  <div class="cn">
   <h3 class="titzx">在线客服</h3>
   <ul>
    <li>
     <span>客服1</span>
     <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes">
      <img border="0" src="online.png" alt="点击这里给我发消息" title="点击这里给我发消息" />
     </a>
    </li>
    <li>
     <span>客服2</span>
     <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes">
      <img border="0" src="online.png" alt="点击这里给我发消息" title="点击这里给我发消息" />
     </a>
    </li>
    <li>
     <span>客服3</span>
     <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes">
      <img border="0" src="online.png" alt="点击这里给我发消息" title="点击这里给我发消息" />
     </a>
    </li>
    <li>
     文字测试测试文字
    </li>
    <li>
     <span>电话:400-000-0000</span>
    </li>
   </ul>
  </div>
 </div>
</div>
<script src="jquery.min.js"></script>
<script>
 $(function() {
  $("#afloattools_show").click(function() {
   $('#divfloattoolsview').animate({
    width: 'show',
    opacity: 'show'
   },
   100,
   function() {
    $('#divfloattoolsview').show()
   });
   $('#afloattools_show').hide();
   $('#afloattools_hide').show()
  });
  $("#afloattools_hide").click(function() {
   $('#divfloattoolsview').animate({
    width: 'hide',
    opacity: 'hide'
   },
   100,
   function() {
    $('#divfloattoolsview').hide()
   });
   $('#afloattools_show').show();
   $('#afloattools_hide').hide()
  })
 });
</script>

注意需要引入jquery.min.js文件,实际运用中请将代码里的QQ号和电话修改为自己的,还可以根据需要在电话下方添加公司的二维码。

预览效果 下载地址

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/down/103.html