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 相关文章推荐
许愿墙中用到的函数
Oct 07 Javascript
javascript中的缓动效果实现程序
Dec 29 Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
理解JavaScript中worker事件api
Dec 25 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
Nov 30 Javascript
vue集成百度UEditor富文本编辑器使用教程
Sep 21 Javascript
浅谈如何优雅处理JavaScript异步错误
Nov 12 Javascript
vue如何使用async、await实现同步请求
Dec 09 Javascript
Vue computed 计算属性代码实例
Apr 22 Javascript
javascript实现移动端触屏拖拽功能
Jul 29 Javascript
在vue中实现嵌套页面(iframe)
Jul 30 Javascript
Vue3.0 手写放大镜效果
Jul 25 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下图片文字混合水印与缩略图实现代码
2009/12/11 PHP
PHP提取数据库内容中的图片地址并循环输出
2010/03/21 PHP
使用PHP导出Word文档的原理和实例
2013/10/21 PHP
php源码分析之DZX1.5加密解密函数authcode用法
2015/06/17 PHP
基于php的CMS中展示文章类实例分析
2015/06/18 PHP
使用PHP json_decode可能遇到的坑与解决方法
2017/08/03 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
laravel与thinkphp之间的区别与优缺点
2021/03/02 PHP
javascript最常用与实用的创建类的代码
2010/08/12 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
2016/06/24 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
2016/08/04 Javascript
ionic中列表项增加和删除的实现方法
2017/01/22 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
2017/03/22 Javascript
12个非常有用的JavaScript技巧
2017/05/17 Javascript
JavaScript实现数值自动增加动画
2017/12/28 Javascript
总结js函数相关知识点
2018/02/27 Javascript
Redux实现组合计数器的示例代码
2018/07/04 Javascript
Angular PWA使用的Demo示例
2019/01/31 Javascript
JS实现分页导航效果
2020/02/19 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
用python 批量更改图像尺寸到统一大小的方法
2018/03/31 Python
利用pandas将numpy数组导出生成excel的实例
2018/06/14 Python
python opencv摄像头的简单应用
2019/06/06 Python
Django 反向生成url实例详解
2019/07/30 Python
解决python gdal投影坐标系转换的问题
2020/01/17 Python
解析pip安装第三方库但PyCharm中却无法识别的问题及PyCharm安装第三方库的方法教程
2020/03/10 Python
tensorflow2.0教程之Keras快速入门
2021/02/20 Python
纯css3实现图片翻牌特效
2015/03/10 HTML / CSS
html5+css3之制作header实例与更新
2020/12/21 HTML / CSS
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
销售会计岗位职责
2014/03/15 职场文书
拔河比赛口号
2014/06/10 职场文书
保护水资源的标语
2014/06/17 职场文书
保护动物的宣传语
2015/07/13 职场文书
2016年元旦致辞
2015/08/01 职场文书
提档介绍信范文
2015/10/22 职场文书