这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 javascript 实现在线客服效果的实例代码,非常不错,这里推荐给大家,有需要的小伙伴可以参考下。
在线客服系统在大量的网站都有应用,特别是销售类网站,可以有效的增加网站的可用性,便于客户及时联系商家,从而增加了交易成功的可能性,在线客服系统的实现方式有多种多样,这里介绍一种网上常见并且非常美观的客服系统,以此达到举一反三的目的,能够比较轻松的实现其他外观形式的客服系统,代码示例如下:
- <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 的时候,客服系统也就是固定在指定的位置了。
来源: http://www.phperz.com/article/17/0417/270418.html