JavaScript to achieve online customer service effect _javascript skills

Online customer service system in a large number of Web sites have applications, especially sales-type sites, can effectively increase the usability of the site, convenient for customers to contact businesses in time, thereby increasing the likelihood of successful trading, online customer service system to achieve a variety of ways, here introduces a common online and very beautiful customer service system, In order to achieve the goal of extrapolate, it is easy to achieve other appearance form of customer service system, code examples are as follows:

Css

<style type= "Text/css" > Body {margin:0px} main_head {Background:url (mytest/js/img3-5_2.png) no-repeat;} *h Tml. 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= "the" valign= "Top" > </td> </tr> <tr> <t D class= "info" valign= "top" > <table class= "qqtable" border= "0" cellspacing= "0" cellpadding= "0" width= "the Align=" "Center" > <tbody> <tr> <td align=middle><a href= "#" target= "_blank" ></a></td> </tr> <tr> <td height=5></td> </tr> <tr> <td height=30 align=middle><span>qq:88888888</span></td> </tr&
   Gt <tr> <td height=30 align=middle><span>qq:88888888</span></td> </tr> &LT;TR&G
    T  &LT;TD height=5></td> </tr> <tr> <td height=35 valign=top align=middle><a href= "#" Target= "_blank"></a></td> </tr> <tr > <td height=38 valign=top align=middle><a href= "#" target= "_blank" ></a></td> </tr> <tr> <td align=middle><div Class=qun><font color= #9b9b9b > Member Exchange Group </font><br><span>123456</span></div> </td> </tr> <tr> <td align=middle><div class=qun><font color= #9b9b9b > Merchant Exchange Group &L t;/font><br><span>654321</span></div></td> </tr> <tr> <td align= middle> </td> </tr> </tbody> </table> </td> </tr> <tr> <td C lass= "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);
   The 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 code above implements the customer service system we want to float on one side of the web. Here is a brief introduction to how to achieve the secondary effect:

I. Principle of realization:

Set the Softwhy object for the entire customer service system to absolute positioning, and then, by default, set its Left property value to an appropriate negative number so that its body part is hidden and only the hint part is displayed:

The body part of the default state that is hidden.

The part of the hint that appears in the default state.

When the mouse is placed in the hint part (that is, put in the Softwhy object), by calling the corresponding function, using setinterval () constantly increase the Left property value to achieve the customer service body part gradually show the effect. When the mouse leaves the Softwhy object, and then by calling the corresponding function, using setinterval () constantly reduce the Left property value to achieve the gradual hiding of the main part of the customer service.

Softwhy Object Top property value here may be a difficult point, it implemented when dragging the scroll bar, the customer service system has a more willful "elastic" feeling, and eventually can be fixed to the window at the top 100px vertical position, this effect is a combination of a function and setinterval (A, 10+parseint (Math.random () *20)), here is a brief introduction to the principle of a function, mainly a mathematical problem:

The effect we want to achieve is that no matter how the scroll bar is dragged, the customer service system ends up in the vertical position 100px from the edge of the window, which means that the top property value is set to D1.scrolltop or D2.scrolltop and 100px. The following is a simple analysis of a function:

Math.max (d1.scrolltop,d2.scrolltop) +_top-parseint (me.style.top), Math.max (d1.scrolltop,d2.scrolltop) +_ Top is the final value of the Me.style.top, which executes the a function by looping through the use of the SetInterval () function, which is the continuous execution of 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 in the designated position.

The above mentioned is the entire content of this article, I hope you can enjoy.