如何实现在线客服效果

发表于2015-07-14 14:42:22| 959次阅读| 来源webkfa| 作者js,javascript

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

如何实现在线客服效果:

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

001<!DOCTYPE html>
002<html>
003<head>
004<meta charset="utf-8">
005<meta name="author" content="http://www.51texiao.cn/" />
006<title>蚂蚁部落</title>
007<style type="text/css">
008body 
009{
010  margin:0px
011}
012.main_head 
013{
014  background:url(mytest/JS/img3-5_2.png) no-repeat;
015}
016*html .main_head 
017{
018  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="mytest/JS/img3-5_2.png", sizingMethod='crop');
019  background:none transparent scroll repeat 0% 0%;
020}
021* + html .main_head 
022{
023  background:url(mytest/JS/img3-5_2.png) no-repeat;
024}
025.info 
026{
027  padding-bottom:10px;
028  padding-left:0px;
029  padding-right:0px;
030  background:url(mytest/JS/img3-5_3.png) repeat-y;
031  padding-top:5px
032}
033* html .info 
034{
035  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="mytest/JS/img3-5_3.png", sizingMethod='crop');
036  background-repeat:repeat-y;
037}
038* + HTML .info 
039{
040  padding-bottom:10px;
041  padding-left:0px;
042  padding-right:0px;
043  background:url(mytest/JS/img3-5_3.png) repeat-y;
044  padding-top:5px;
045}
046.down_kefu 
047{
048  width:157px;
049  background:url(mytest/JS/img3-5_4.png) no-repeat;
050  height:8px
051}
052* html .down_kefu 
053{
054  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="mytest/JS/img3-5_4.png", sizingMethod='crop');
055  width:157px;
056  background-repeat:repeat-y;
057  height:8px
058}
059* + HTML .down_kefu 
060{
061  width:157px;
062  background:url(mytest/JS/img3-5_4.png) no-repeat;
063  height:8px
064}
065.Obtn 
066{
067  margin-top:104px;
068  width:32px;
069  background:url(mytest/JS/img3-5_1.png) no-repeat;
070  float:left;
071  height:139px;
072  margin-left:-5px
073}
074* HTML .Obtn 
075{
076  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="mytest/JS/img3-5_1.png", sizingMethod='crop');
077  width:32px;
078  background:none transparent scroll repeat 0% 0%;
079  float:left;
080  height:139px
081}
082* + html .Obtn 
083{
084  margin-top:104px;
085  width:32px;
086  background:url(mytest/JS/img3-5_1.png) no-repeat;
087  float:left;
088  height:139px;
089  margin-left:-5px;
090}
091.qqtable span
092{
093  padding-bottom:5px;
094  line-height:20px;
095  padding-left:0px;
096  width:100px;
097  padding-right:0px;
098  color:#ff6600;
099  font-size:13px;
100  font-weight:bold;
101  padding-top: 5px
102}
103.qqtable a 
104{
105  text-decoration:none;
106}
107.qqtable a:hover 
108{
109  text-decoration: none
110}
111.qun 
112{
113  border-bottom:#ffd2bf 1px solid;
114  border-left:#ffd2bf 1px solid;
115  padding-bottom:5px;
116  line-height:20px;
117  background-color:#ffffff;
118  padding-left:0px;
119  width:100px;
120  padding-right:0px;
121  font-size:12px;
122  border-top:#ffd2bf 1px solid;
123  border-right:#ffd2bf 1px solid;
124  padding-top:5px
125}
126.qun span 
127{
128  color:#ff6600;
129  font-size:13px;
130  font-weight:bold;
131}
132</style>
133</head>
134<body>
135<div id="softwhy">
136<table style="float:left" border="0" cellspacing="0" cellpadding="0" width="157">
137<tbody>
138  <tr>
139    <td class="main_head" height="39" valign="top"> </td>
140  </tr>
141  <tr>
142   <td class="info" valign="top">
143    <table class="qqtable" border="0" cellspacing="0" cellpadding="0" width="120" align="center">
144     <tbody>
145      <tr>
146       <td align=middle><a href="#" target="_blank"><img border=0 src="mytest/JS/kefu_head.gif"></a></td>
147      </tr>
148      <tr>
149       <td height=5></td>
150      </tr>
151      <tr>
152       <td height=30 align=middle><span>qq:88888888</span></td>
153      </tr>
154      <tr>
155       <td height=30 align=middle><span>qq:88888888</span></td>
156      </tr>
157      <tr>
158       <td height=5></td>
159      </tr>
160      <tr>
161       <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>
162      </tr>
163      <tr>
164       <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>
165      </tr>
166      <tr>
167       <td align=middle><div class=qun><font color=#9b9b9b>会员交流群</font><br><span>123456</span></div></td>
168      </tr>
169      <tr>
170       <td align=middle><div class=qun><font color=#9b9b9b>商家交流群</font><br><span>654321</span></div></td>
171      </tr>
172      <tr>
173       <td align=middle> </td>
174      </tr>
175     </tbody>
176    </table>
177   </td>
178  </tr>
179  <tr>
180   <td class="down_kefu" valign="top"></td>
181  </tr>
182</tbody>
183</table>
184<div class="Obtn"></div>
185</div>
186<div style="height:1000px;"></div>
187<script type="text/javascript">
188kefu=function(id,_top,_left){
189var me=document.getElementById(id);
190var d1=document.body;
191var d2=document.documentElement;
192d1.style.height=d2.style.height='100%';
193me.style.top=_top+'px';
194me.style.left=_left+"px";
195me.style.position='absolute';
196function a()
197{
198   me.style.top=parseInt(me.style.top)+(Math.max(d1.scrollTop,d2.scrollTop)+_top-parseInt(me.style.top))*0.1+'px';
199}
200setInterval(a,10+parseInt(Math.random()*20));
201}
202   
203window.onload=function(){
204   kefu('softwhy',100,-152)
205}
206</script> 
207   
208<script type="text/javascript"> 
209  var InterTime=1;
210  var maxWidth=-1;
211  var minWidth=-152;
212  var numInter=10;
213  var BigInter;
214  var SmallInter;
215  var o=document.getElementById("softwhy");
216  var i=parseInt(o.style.left);
217  function Big()
218  {
219   if(parseInt(o.style.left)<maxWidth)
220   {
221     i=parseInt(o.style.left);
222     i+= numInter;        
223     o.style.left=i+"px";        
224     if(i==maxWidth)
225       clearInterval(BigInter);
226     }
227  }
228     
229  function toBig()
230  {
231    clearInterval(SmallInter);
232    BigInter=setInterval(Big,InterTime);
233  }
234  function Small()
235  {
236    if(parseInt(o.style.left)>minWidth)
237   {
238     i=parseInt(o.style.left);
239     i=i-numInter;
240     o.style.left=i+"px";
241     if(i==minWidth)
242       clearInterval(SmallInter);
243     }
244  }
245  function toSmall()
246  {
247    clearInterval(BigInter);
248    SmallInter=setInterval(Small,InterTime);                                
249  }                        
250</script>
251</body>
252</html>

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

一.实现原理:

将整个客服系统所在的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的时候，客服系统也就是固定在指定的位置了。

如何实现在线客服效果

发表于2015-07-14 14:42:22| 959次阅读| 来源webkfa| 作者js,javascript

相关文章

最新发布

阅读排行

热门文章

猜你喜欢