javascript实现在线客服效果


Posted in Javascript onJuly 15, 2015

在线客服系统在大量的网站都有应用,特别是销售类网站,可以有效的增加网站的可用性,便于客户及时联系商家,从而增加了交易成功的可能性,在线客服系统的实现方式有多种多样,这里介绍一种网上常见并且非常美观的客服系统,以此达到举一反三的目的,能够比较轻松的实现其他外观形式的客服系统,代码示例如下:

CSS

<style type="text/css">
body 
{
 margin:0px
}
.main_head 
{
 background:url(mytest/JS/img3-5_2.png) no-repeat;
}
*html .main_head 
{
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="mytest/JS/img3-5_2.png", sizingMethod='crop');
 background:none transparent scroll repeat 0% 0%;
}
* + html .main_head 
{
 background:url(mytest/JS/img3-5_2.png) no-repeat;
}
.info 
{
 padding-bottom:10px;
 padding-left:0px;
 padding-right:0px;
 background:url(mytest/JS/img3-5_3.png) repeat-y;
 padding-top:5px
}
* html .info 
{
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="mytest/JS/img3-5_3.png", sizingMethod='crop');
 background-repeat:repeat-y;
}
* + HTML .info 
{
 padding-bottom:10px;
 padding-left:0px;
 padding-right:0px;
 background:url(mytest/JS/img3-5_3.png) repeat-y;
 padding-top:5px;
}
.down_kefu 
{
 width:157px;
 background:url(mytest/JS/img3-5_4.png) no-repeat;
 height:8px
}
* html .down_kefu 
{
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="mytest/JS/img3-5_4.png", sizingMethod='crop');
 width:157px;
 background-repeat:repeat-y;
 height:8px
}
* + HTML .down_kefu 
{
 width:157px;
 background:url(mytest/JS/img3-5_4.png) no-repeat;
 height:8px
}
.Obtn 
{
 margin-top:104px;
 width:32px;
 background:url(mytest/JS/img3-5_1.png) no-repeat;
 float:left;
 height:139px;
 margin-left:-5px
}
* HTML .Obtn 
{
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="mytest/JS/img3-5_1.png", sizingMethod='crop');
 width:32px;
 background:none transparent scroll repeat 0% 0%;
 float:left;
 height:139px
}
* + html .Obtn 
{
 margin-top:104px;
 width:32px;
 background:url(mytest/JS/img3-5_1.png) no-repeat;
 float:left;
 height:139px;
 margin-left:-5px;
}
.qqtable span
{
 padding-bottom:5px;
 line-height:20px;
 padding-left:0px;
 width:100px;
 padding-right:0px;
 color:#ff6600;
 font-size:13px;
 font-weight:bold;
 padding-top: 5px
}
.qqtable a 
{
 text-decoration:none;
}
.qqtable a:hover 
{
 text-decoration: none
}
.qun 
{
 border-bottom:#ffd2bf 1px solid;
 border-left:#ffd2bf 1px solid;
 padding-bottom:5px;
 line-height:20px;
 background-color:#ffffff;
 padding-left:0px;
 width:100px;
 padding-right:0px;
 font-size:12px;
 border-top:#ffd2bf 1px solid;
 border-right:#ffd2bf 1px solid;
 padding-top:5px
}
.qun span 
{
 color:#ff6600;
 font-size:13px;
 font-weight:bold;
}
</style>

html

<div id="softwhy">
<table style="float:left" border="0" cellspacing="0" cellpadding="0" width="157">
<tbody>
 <tr>
  <td class="main_head" height="39" valign="top"> </td>
 </tr>
 <tr>
  <td class="info" valign="top">
  <table class="qqtable" border="0" cellspacing="0" cellpadding="0" width="120" align="center">
   <tbody>
   <tr>
    <td align=middle><a href="#" target="_blank"><img border=0 src="mytest/JS/kefu_head.gif"></a></td>
   </tr>
   <tr>
    <td height=5></td>
   </tr>
   <tr>
    <td height=30 align=middle><span>qq:88888888</span></td>
   </tr>
   <tr>
    <td height=30 align=middle><span>qq:88888888</span></td>
   </tr>
   <tr>
    <td height=5></td>
   </tr>
   <tr>
    <td height=35 valign=top align=middle><a href="#" target="_blank"><img border=0 src="mytest/JS/img3-5-btn1.gif" width=90 height=25></a></td>
   </tr>
   <tr>
    <td height=38 valign=top align=middle><a href="#" target="_blank"><img border=0 src="mytest/JS/img3-5-btn2.gif" width=90 height=25></a></td>
   </tr>
   <tr>
    <td align=middle><div class=qun><font color=#9b9b9b>会员交流群</font><br><span>123456</span></div></td>
   </tr>
   <tr>
    <td align=middle><div class=qun><font color=#9b9b9b>商家交流群</font><br><span>654321</span></div></td>
   </tr>
   <tr>
    <td align=middle> </td>
   </tr>
   </tbody>
  </table>
  </td>
 </tr>
 <tr>
  <td class="down_kefu" valign="top"></td>
 </tr>
</tbody>
</table>
<div class="Obtn"></div>
</div>
<div style="height:1000px;"></div>

JS

<script type="text/javascript">
kefu=function(id,_top,_left){
var me=document.getElementById(id);
var d1=document.body;
var d2=document.documentElement;
d1.style.height=d2.style.height='100%';
me.style.top=_top+'px';
me.style.left=_left+"px";
me.style.position='absolute';
function a()
{
  me.style.top=parseInt(me.style.top)+(Math.max(d1.scrollTop,d2.scrollTop)+_top-parseInt(me.style.top))*0.1+'px';
}
setInterval(a,10+parseInt(Math.random()*20));
}
 
window.onload=function(){
  kefu('softwhy',100,-152)
}
</script> 
 
<script type="text/javascript"> 
 var InterTime=1;
 var maxWidth=-1;
 var minWidth=-152;
 var numInter=10;
 var BigInter;
 var SmallInter;
 var o=document.getElementById("softwhy");
 var i=parseInt(o.style.left);
 function Big()
 {
  if(parseInt(o.style.left)<maxWidth)
  {
   i=parseInt(o.style.left);
   i+= numInter;    
   o.style.left=i+"px";    
   if(i==maxWidth)
    clearInterval(BigInter);
   }
 }
  
 function toBig()
 {
  clearInterval(SmallInter);
  BigInter=setInterval(Big,InterTime);
 }
 function Small()
 {
  if(parseInt(o.style.left)>minWidth)
  {
   i=parseInt(o.style.left);
   i=i-numInter;
   o.style.left=i+"px";
   if(i==minWidth)
    clearInterval(SmallInter);
   }
 }
 function toSmall()
 {
  clearInterval(BigInter);
  SmallInter=setInterval(Small,InterTime);                
 }            
</script>

以上代码实现了我们想要的在网页一侧漂浮的客服系统。下面就简单介绍一下如何实现次效果:

一.实现原理:

将整个客服系统所在的softwhy对象设置为绝对定位,然后在默认状态下,将它的left属性值设置为一个恰当的负值,这样它主体部分就会被隐藏,只显示提示部分:

javascript实现在线客服效果

默认状态下被隐藏的主体部分。

javascript实现在线客服效果

默认状态下显示的提示部分。

当鼠标放在放在提示部分(也就是放在softwhy对象)时候,通过调用相应的函数,使用setInterval()不断的加大left属性值来实现客服主体部分逐渐显示的效果。当鼠标离开softwhy对象的时候,再通过调用相应的函数,使用setInterval()不断的减少left属性值来实现客服主体部分的逐渐隐藏。

softwhy对象top属性值在这里可能是个难点,它实现了当拖动滚动条的时候,客服系统具有比较任性的“弹性”的感觉,并且最终能够固定在距离窗口顶端100px的垂直位置上,此效果是结合a函数和setInterval(a,10+parseInt(Math.random()*20))实现的,这里简单介绍一下a函数的原理,主要是个数学问题:

我们想要实现的效果就是无论怎么拖动滚动条,客服系统最终在垂直位置上距离窗口上边缘100px,也就是说只要将top属性值设置为d1.scrollTop或者d2.scrollTop与100px之和就可以了。下面简单对a函数进行一下分析:

Math.max(d1.scrollTop,d2.scrollTop)+_top-parseInt(me.style.top)中,Math.max(d1.scrollTop,d2.scrollTop)+_top就是me.style.top的最终值,在通过使用setInterval()函数循环执行a函数,也就是不断的执行parseInt(me.style.top)+(Math.max(d1.scrollTop,d2.scrollTop)+_top-parseInt(me.style.top))*0.1+'px',当me.style.top=Math.max(d1.scrollTop,d2.scrollTop)+_top的时候,客服系统也就是固定在指定的位置了。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
使用SyntaxHighlighter实现HTML高亮显示代码的方法
Feb 04 Javascript
使用JavaScript 编写简单计算器
Nov 24 Javascript
JavaScript获取页面中超链接数量的方法
Nov 09 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
Jan 23 Javascript
微信小程序商城项目之淘宝分类入口(2)
Apr 17 Javascript
微信小程序 wx:for的使用实例详解
Apr 27 Javascript
BootStrap中Table隐藏后显示问题的实现代码
Aug 31 Javascript
分析JavaScript数组操作难点
Dec 18 Javascript
微信小程序左滑删除功能开发案例详解
Nov 12 Javascript
element-ui 时间选择器限制范围的实现(随动)
Jan 09 Javascript
谈一谈vue请求数据放在created好还是mounted里好
Jul 27 Javascript
vue实现拖拽进度条
Mar 01 Vue.js
jQuery实现的进度条效果
Jul 15 #Javascript
jQuery中(function($){})(jQuery)详解
Jul 15 #Javascript
jQuery的事件委托实例分析
Jul 15 #Javascript
jQuery的end()方法使用详解
Jul 15 #Javascript
浅谈$(document)和$(window)的区别
Jul 15 #Javascript
浅谈window对象的scrollBy()方法
Jul 15 #Javascript
jQuery的bind()方法使用详解
Jul 15 #Javascript
You might like
PHP笔记之:基于面向对象设计的详解
2013/05/14 PHP
php计算年龄精准到年月日
2015/11/17 PHP
PHP结合Jquery和ajax实现瀑布流特效
2016/01/07 PHP
php版微信js-sdk支付接口类用法示例
2016/10/12 PHP
Laravel框架中自定义模板指令总结
2017/12/17 PHP
jQuery 使用手册(六)
2009/09/23 Javascript
JavaScript 事件入门知识
2015/04/13 Javascript
js图片轮播特效代码分享
2015/09/07 Javascript
jquery实现拖动效果
2016/08/10 Javascript
Angular 应用技巧总结
2016/09/14 Javascript
详解Angular如何正确的操作DOM
2018/07/06 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
2018/08/15 Javascript
vue视频播放插件vue-video-player的具体使用方法
2019/11/08 Javascript
Python实现检测文件MD5值的方法示例
2018/04/11 Python
win10下tensorflow和matplotlib安装教程
2018/09/19 Python
Python 实现异步调用函数的示例讲解
2018/10/14 Python
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
OpenCV 边缘检测
2019/07/10 Python
基于python实现雪花算法过程详解
2019/11/16 Python
python多线程semaphore实现线程数控制的示例
2020/08/10 Python
Python+unittest+DDT实现数据驱动测试
2020/11/30 Python
全天然狗零食:Best Bully Sticks
2016/09/22 全球购物
洛杉矶生活休闲而精致的基础品牌:Mika Jaymes
2018/01/07 全球购物
求职简历自荐信范文
2013/10/21 职场文书
大学生入党自我鉴定
2013/10/31 职场文书
考试作弊被抓检讨书
2014/01/10 职场文书
秋季运动会广播稿大全
2014/02/17 职场文书
百年校庆节目主持词
2014/03/27 职场文书
慰问敬老院活动总结
2014/04/26 职场文书
代领毕业证委托书
2014/08/02 职场文书
教师个人查摆剖析材料
2014/10/14 职场文书
圣诞节开幕词
2015/01/29 职场文书
幼儿园教师师德承诺书
2015/04/28 职场文书
二审代理词范文
2015/05/25 职场文书
银行柜员工作心得体会
2016/01/23 职场文书
Nginx四层负载均衡的配置指南
2021/06/11 Servers