javascript實現線上客服效果_javascript技巧

線上客服系統在大量的網站都有應用，特別是銷售類網站，可以有效增加網站的可用性，便於客戶及時聯絡商家，從而增加了交易成功的可能性，線上客服系統的實現方式有多種多樣，這裡介紹一種網上常見並且非常美觀的客服系統，以此達到舉一反三的目的，能夠比較輕鬆的實現其他外觀形式的客服系統，程式碼範例如下:

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屬性值設定為一個恰當的負值，這樣它主體部分就會被隱藏，只顯示提示部分:

預設狀態下被隱藏的主體部分。

預設狀態下顯示的提示部分。

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

以上所述就是本文的全部內容了，希望大家能夠喜歡。