欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript實現(xiàn)在線客服效果

 更新時間：2015年07月15日 11:08:50   投稿：hebedich  
這篇文章主要介紹了javascript實現(xiàn)在線客服效果的實例代碼，非常不錯，這里推薦給大家，有需要的小伙伴可以參考下。

在線客服系統(tǒng)在大量的網(wǎng)站都有應用，特別是銷售類網(wǎng)站，可以有效的增加網(wǎng)站的可用性，便于客戶及時聯(lián)系商家，從而增加了交易成功的可能性，在線客服系統(tǒng)的實現(xiàn)方式有多種多樣，這里介紹一種網(wǎng)上常見并且非常美觀的客服系統(tǒng)，以此達到舉一反三的目的，能夠比較輕松的實現(xiàn)其他外觀形式的客服系統(tǒng)，代碼示例如下:

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>

以上代碼實現(xiàn)了我們想要的在網(wǎng)頁一側漂浮的客服系統(tǒng)。下面就簡單介紹一下如何實現(xiàn)次效果:

一.實現(xiàn)原理:

將整個客服系統(tǒng)所在的softwhy對象設置為絕對定位，然后在默認狀態(tài)下，將它的left屬性值設置為一個恰當?shù)呢撝担@樣它主體部分就會被隱藏，只顯示提示部分:

默認狀態(tài)下被隱藏的主體部分。

默認狀態(tài)下顯示的提示部分。

當鼠標放在放在提示部分（也就是放在softwhy對象）時候，通過調用相應的函數(shù)，使用setInterval()不斷的加大left屬性值來實現(xiàn)客服主體部分逐漸顯示的效果。當鼠標離開softwhy對象的時候，再通過調用相應的函數(shù)，使用setInterval()不斷的減少left屬性值來實現(xiàn)客服主體部分的逐漸隱藏。

softwhy對象top屬性值在這里可能是個難點，它實現(xiàn)了當拖動滾動條的時候，客服系統(tǒng)具有比較任性的“彈性”的感覺，并且最終能夠固定在距離窗口頂端100px的垂直位置上，此效果是結合a函數(shù)和setInterval(a,10+parseInt(Math.random()*20))實現(xiàn)的，這里簡單介紹一下a函數(shù)的原理，主要是個數(shù)學問題:

我們想要實現(xiàn)的效果就是無論怎么拖動滾動條，客服系統(tǒng)最終在垂直位置上距離窗口上邊緣100px，也就是說只要將top屬性值設置為d1.scrollTop或者d2.scrollTop與100px之和就可以了。下面簡單對a函數(shù)進行一下分析:

Math.max(d1.scrollTop,d2.scrollTop)+_top-parseInt(me.style.top)中，Math.max(d1.scrollTop,d2.scrollTop)+_top就是me.style.top的最終值，在通過使用setInterval()函數(shù)循環(huán)執(zhí)行a函數(shù)，也就是不斷的執(zhí)行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的時候，客服系統(tǒng)也就是固定在指定的位置了。

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

相關文章

最新評論