Javascript enables online customer service and javascript online customer service

Javascript enables online customer service and javascript online customer service

The online customer service system is used on a large number of websites, especially for sales websites. This can effectively increase the availability of the website and facilitate customers to contact sellers in a timely manner, thus increasing the possibility of successful transactions, the online customer service system can be implemented in a variety of ways. Here we will introduce a common and beautiful online customer service system, in order to achieve the opposite goal, other forms of customer service systems can be easily implemented. The code example is as follows:

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> <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">  </a> </td> </tr> <tr> <td height = 5> </td> </tr> <td height = 30 align = middle> <span> qq: 88888888 </span> </td> </tr> <td height = 30 align = middle> <span> qq: 88888888 </span> </td> </tr> <td height = 5> </td> </tr> <td height = 35 valign = top align = middle> <a href = "#" target = "_ blank">  </a> </td> </tr> <td height = 38 valign = top align = middle> <a href = "#" target = "_ blank">  </a> </td> </tr> <td align = middle> <div class = qun> <font color = # 9b9b9b> member exchange group </font> <br> <span> 123456 </span> </div> </ td> </tr> <td align = middle> <div class = qun> <font color = # 9b9b9b> merchant exchange group </font> <br> <span> 654321 </span> </div> </td> </tr> <td align = middle> </td> </tr> </tbody> </table> </td> </tr> <td class = "down_kefu" valign = "top"> </td> </tr> </tbody> </table> <div class = "Obtn"> </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>

The above code implements the customer service system that we want to float on the webpage side. The following describes how to achieve the secondary effect:

I. Implementation principle:

Set the softwhy object of the entire customer service system to absolute positioning, and set its left attribute value to an appropriate negative value by default, so that its main part will be hidden, only the prompt section is displayed:

Hidden body section by default.

The prompt section displayed by default.

When you place the cursor on the prompt part (that is, the softwhy object), call the corresponding function and use setInterval () to continuously increase the left attribute value to gradually display the customer service subject. When the mouse leaves the softwhy object, call the corresponding function and use setInterval () to continuously reduce the left attribute value to gradually hide the customer service subject.

The top attribute value of the softwhy object may be difficult here. It makes the customer service system flexible when dragging the scroll bar, and finally it can be fixed at a vertical position of PX from the top of the window. This effect is combined with the function and setInterval (a, 10 + parseInt (Math. random () * 20). Here we will briefly introduce the principle of function a, which is mainly a mathematical problem:

The result we want to achieve is that no matter how we drag the scroll bar, the customer service system will eventually be PX above the edge of the window at a vertical position, that is to say, you only need to set the top attribute value to the sum of d1.scrollTop or d2.scrollTop and 100px. The following is a brief analysis of function:

Math. max (d1.scrollTop, d2.scrollTop) + _ top-parseInt (me. style. top), Math. max (d1.scrollTop, d2.scrollTop) + _ top is me. style. the final value of top is executed cyclically by using the setInterval () function, that is, continuously executing parseInt (me. style. top) + (Math. max (d1.scrollTop, d2.scrollTop) + _ top-parseInt (me. style. top) * 0.1 + 'px ', when me. style. top = Math. max (d1.scrollTop, d2.scrollTop) + _ top, the customer service system is fixed at the specified position.

The above is all the content of this article. I hope you will like it.