javascript实现在线客服效果

2015-07-15 15:20作者：zhao

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

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

<tbody>

<tr>

</tr>

<tr>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</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>

</tr>

</tbody>

</table>

</td>

</tr>

<tr>

</tr>

</tbody>

</table>

</div>

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>

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属性值设置为一个恰当的负值，这样它主体部分就会被隐藏，只显示提示部分:

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

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

当鼠标放在放在提示部分（也就是放在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的时候，客服系统也就是固定在指定的位置了。

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