javascript实现在线客服效果
在线客服系统在大量的网站都有应用,特别是销售类网站,可以有效的增加网站的可用性,便于客户及时联系商家,从而增加了交易成功的可能性,在线客服系统的实现方式有多种多样,这里介绍一种网上常见并且非常美观的客服系统,以此达到举一反三的目的,能够比较轻松的实现其他外观形式的客服系统,代码示例如下:
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-: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-: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-: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-: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-: 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-:#ffd2bf 1px solid; border-right:#ffd2bf 1px solid; padding-: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=""> </td> </tr> <tr> <td class="info" valign=""> <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= 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= 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=""></td> </tr> </tbody> </table> <div class="Obtn"></div> </div> <div style="height:1000px;"></div>
JS
<script type="text/javascript"> kefu=function(id,_,_left){ var me=document.getElementById(id); var d1=document.body; var d2=document.documentElement; d1.style.height=d2.style.height='100%'; me.style.=_+'px'; me.style.left=_left+"px"; me.style.position='absolute'; function a() { me.style.=parseInt(me.style.)+(Math.max(d1.scrollTop,d2.scrollTop)+_-parseInt(me.style.))*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>
以上代码实现了我们想要的在网页一侧漂浮的客服系统。狼蚁网站SEO优化就简单介绍一下如何实现次效果:
一.实现原理:
将整个客服系统所在的softwhy对象设置为绝对定位,然后在默认状态下,将它的left属性值设置为一个恰当的负值,这样它主体部分就会被隐藏,只显示提示部分:
默认状态下被隐藏的主体部分。
默认状态下显示的提示部分。
当鼠标放在放在提示部分(也就是放在softwhy对象)时候,通过调用相应的函数,使用setInterval()不断的加大left属性值来实现客服主体部分逐渐显示的效果。当鼠标离开softwhy对象的时候,再通过调用相应的函数,使用setInterval()不断的减少left属性值来实现客服主体部分的逐渐隐藏。
softwhy对象属性值在这里可能是个难点,它实现了当拖动滚动条的时候,客服系统具有比较任性的“弹性”的感觉,并且最终能够固定在距离窗口顶端100px的垂直位置上,此效果是结合a函数和setInterval(a,10+parseInt(Math.random()*20))实现的,这里简单介绍一下a函数的原理,主要是个数学问题:
我们想要实现的效果就是无论怎么拖动滚动条,客服系统最终在垂直位置上距离窗口上边缘100px,也就是说只要将属性值设置为d1.scrollTop或者d2.scrollTop与100px之和就可以了。狼蚁网站SEO优化简单对a函数进行一下分析:
Math.max(d1.scrollTop,d2.scrollTop)+_-parseInt(me.style.)中,Math.max(d1.scrollTop,d2.scrollTop)+_就是me.style.的最终值,在通过使用setInterval()函数循环执行a函数,也就是不断的执行parseInt(me.style.)+(Math.max(d1.scrollTop,d2.scrollTop)+_-parseInt(me.style.))*0.1+'px',当me.style.=Math.max(d1.scrollTop,d2.scrollTop)+_的时候,客服系统也就是固定在指定的位置了。
以上所述就是本文的全部内容了,希望大家能够喜欢。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程