Javascript mencapai kemahiran effect_javascript perkhidmatan pelanggan dalam talian

Sistem perkhidmatan pelanggan dalam talian digunakan dalam sebilangan besar laman web, terutamanya laman web jualan, yang dapat meningkatkan ketersediaan laman web dengan berkesan dan memudahkan pelanggan menghubungi peniaga tepat pada masanya, sekali gus meningkatkan kemungkinan transaksi yang berjaya kaedah sistem perkhidmatan pelanggan dalam talian adalah seperti berikut Terdapat banyak jenis Di sini kami memperkenalkan sistem perkhidmatan pelanggan yang biasa dan sangat cantik di Internet, untuk mencapai tujuan membuat kesimpulan daripada satu contoh dan memudahkan untuk melaksanakan bentuk lain. sistem perkhidmatan pelanggan. Contoh kod adalah seperti berikut:

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>

Kod di atas melaksanakan sistem perkhidmatan pelanggan yang kami mahu terapung di sisi halaman web. Berikut ialah pengenalan ringkas tentang cara mencapai kesan ini:

1. Prinsip pelaksanaan:

Tetapkan objek softwhy di mana keseluruhan sistem perkhidmatan pelanggan terletak kepada kedudukan mutlak, dan kemudian tetapkan nilai atribut kirinya kepada nilai negatif yang sesuai secara lalai, supaya bahagian utamanya akan disembunyikan dan hanya bahagian gesaan akan dipaparkan :

Bahagian badan disembunyikan secara lalai.

Bahagian gesaan dipaparkan secara lalai.

Apabila tetikus diletakkan pada bahagian gesaan (iaitu, pada objek softwhy), fungsi yang sepadan dipanggil dan setInterval() digunakan untuk terus meningkatkan nilai atribut kiri untuk mencapai kesan memaparkan bahagian utama secara beransur-ansur daripada perkhidmatan pelanggan. Apabila tetikus meninggalkan objek softwhy, fungsi yang sepadan dipanggil dan setInterval() digunakan untuk terus mengurangkan nilai atribut kiri untuk menyembunyikan bahagian utama perkhidmatan pelanggan secara beransur-ansur.

Nilai atribut atas objek softwhy mungkin menjadi kesukaran di sini. Ia membolehkan sistem perkhidmatan pelanggan mempunyai perasaan "anjal" yang lebih sengaja apabila menyeret bar skrol, dan akhirnya boleh dibetulkan pada kedudukan menegak 100px. dari bahagian atas tetingkap , kesan ini dicapai dengan menggabungkan fungsi a dan setInterval(a,10 parseInt(Math.random()*20)). terutamanya masalah matematik:

Kesan yang ingin kami capai ialah tidak kira bagaimana bar skrol diseret, sistem perkhidmatan pelanggan akhirnya akan berada 100px dari tepi atas tetingkap dalam kedudukan menegak, selagi nilai atribut atas ditetapkan kepada d1.scrollTop atau d2.scrollTop dan 100px Dan itu sahaja. Mari analisa secara ringkas fungsi a:

Math.max(d1.scrollTop,d2.scrollTop) _top-parseInt(me.style.top), Math.max(d1.scrollTop,d2.scrollTop) _top ialah nilai akhir me.style.top, Dengan menggunakan fungsi setInterval() untuk melaksanakan fungsi dalam gelung, iaitu, secara berterusan melaksanakan parseInt(me.style.top) (Math.max(d1.scrollTop,d2.scrollTop) _top-parseInt(me.style.top ))* 0.1 'px', apabila me.style.top=Math.max(d1.scrollTop,d2.scrollTop) _top, sistem perkhidmatan pelanggan ditetapkan pada kedudukan yang ditentukan.

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.