javascript实现在线客服效果

在线客服系统在大量的网站都有应用，特别是销售类网站，可以有效的增加网站的可用性，便于客户及时联系商家，从而增加了交易成功的可能性，在线客服系统的实现方式有多种多样，这里介绍一种网上常见并且非常美观的客服系统，以此达到举一反三的目的，能够比较轻松的实现其他外观形式的客服系统，代码示例如下：

半铸钢钢性铸铁(铸造半钢)

样式类型=' text/CSS '正文{ margin :0 px } .main _ head {后台： URL(我的测试/JS/img 3-5 _ 2。png)不重复；}*html .main _ head { filter : progid : maximagettransform .微软。AlphaimageLoader(src=' http : my test/JS/img 3-5 _ 2。png '，大小调整方法=' crop背景： one透明滚动重复0% 0%;}* html .main _ head {后台： URL(我的测试/JS/img 3-5 _ 2。png)不重复；}.信息{填充-底部：10 px左填充：0 px填充-右侧：0 px后台： URL(我的测试/JS/img 3-5 _ 3。png)重复-y；填充-top:5px}* html .信息{ filter : progid : maximagettransform .微软。AlphaimageLoader(src=' http : my test/JS/img 3-5 _ 3。png '，大小调整方法=' crop背景-重复：次重复-y；}* HTML .信息{填充-底部：10 px左填充：0 px填充-右侧：0 px后台： URL(我的测试/JS/img 3-5 _ 3。png)重复-y；填充-top :5 px；}.向下_福柯{ width :157 px background : URL(我的测试/JS/img 3-5 _ 4。巴布亚新几内亚)无重复；高度：8px}* html .向下_福柯{ filter : progid : maximagettransform .微软。AlphaimageLoader(src=' http : my test/JS/img 3-5 _ 4。png '，大小调整方法=' crop宽度宽度：157像素背景-重复：重复-y；高度：8px}* HTML .向下_福柯{ width :157 px background : URL(我的测试/JS/img 3-5 _ 4。巴布亚新几内亚)无重复；高度：8px} .obtn { margin-top :104 px；宽度：32 px后台： URL(我的测试/JS/img 3-5 _ 1。巴布亚新几内亚)无重复；float:left高度：139 px边距-left:-5px}* HTML .获取{ filter : progid : maximagettransform .微软。AlphaimageLoader(src=' http : my test/JS/img 3-5 _ 1。png '，大小调整方法=' crop宽度：32 px背景： one透明滚动重复0% 0%;float:left高度：139px}* html .obtn { margin-top :104 px；宽度：32 px后台： URL(我的测试/JS/img 3-5 _ 1。巴布亚新几内亚)无重复；float:left高度：139 px左边距：-5px；}.QQ表格跨度{填充-底部：5 px线高：20 px左填充：0 px宽度宽度：100像素填充-右侧：0 pxcolor : # ff 6600 font-size :13 px；字体粗细：加粗；衬垫-top: 5px} .QQ表a {文饰：无；}.QQ桌子a :悬停{文字装饰：无}。群{ border-bottom:#ffd2bf 1px固体；边框-左侧：#ffd2bf 1px实心；填充-底部：5 px线高：20 px背景-color : # ffffff；左填充：0 px宽度宽度：100像素填充-右侧：0 pxfont-size :12 pxborder-top:#ffd2bf 1px实心；右边框：#ffd2bf 1px实心；填充-top:5px} .群span { color : # ff 6600 font-size :13 px；字体粗细：加粗；}/stylehtml

div id=' softwhy '表格样式=' float 3360 left '边框=' 0 '单元格间距=' 0 '单元格填充=' 0 '宽度=' 157 ' t正文tr TD类=' main _ head '高度=' 39 ' valgn=' top '/TD/tr TD tr TD类=' info ' valgn=' top '表格类=' QQ table '边框=' 0 ' 单元格间距=' 0 '单元格填充=' 0 '宽度=' 120 '对齐='居中' t正文tr TD对齐=1会员交流群/font brspan 123456/span/div/TD/tr TD align=middlediv class=Qin font color=# 9b9 b9b商家交流群/font brspan 654321/span/div/TD/tr TD align=middle/TD/tr/t body/table/TD/tr TD class=' down _福柯valgn=' top '/TD/tr/t body/table div class=' Obtn '/div/div style=' height :1000 px；' /divJS

脚本类型=' text/JavaScript '福柯=function(id，_top，_ left){ var me=document。getelementbyid(id)；var D1=document . body var D2=document。文档元素；D1。风格。高度=D2。风格。高度=' 100% '；我。风格。top=_ top ' px我。风格。left=_ left ' pxme.style.position='绝对；函数我。风格。top=parsent(我。风格。top)(数学。马克斯(D1。滚动顶部，D2。滚动顶部)_ top-parsent(me。风格。top))* 0.1 ' px '；}setInterval(a，10 parseInt(数学。random()* 20))；} window . onload=function(){ 0福柯(' softwhy '，100，-152)}/script脚本类型=' text/JavaScript ' var InterTime=1；var MaxWidth=-1；var minWidth=-152；var NuMinter=10 var BigInterval small Interval o=document。getelementbyid(' soft why ')；var I=ParSeint(o . style。左)；函数Big(){ if(ParSeint(o . style。左)MaxWidth){ I=ParSeint(o . style。左)；i=numIntero。风格。左=I ' pxif(I==MaxWidth)清零间隔(big inter)；} }函数ToBig(){ ClearInterval(small inter)；BigInter=setInterval(大，InterTime)；}函数Small(){ if(ParSeint(o . style。左)minWidth){ I=ParSeint(o . style。左)；I=I-Numinter；o .风格。左=I ' pxif(I==minWidth)clearInterval(小利息)；} }函数toSmall(){ clearInterval(BigInter)；SmallInter=setInterval(小，InterTime)；}/脚本以上代码实现了我们想要的在网页一侧漂浮的客服系统。下面就简单介绍一下如何实现次效果：

一。实现原理：

将整个客服系统所在的软为什么对象设置为绝对定位，然后在默认状态下，将它的左边的属性值设置为一个恰当的负值，这样它主体部分就会被隐藏，只显示提示部分：

默认状态下被隐藏的主体部分。

默认状态下显示的提示部分。

当鼠标放在放在提示部分（也就是放在软为什么对象)时候，通过调用相应的函数，使用setInterval()不断的加大左边的属性值来实现客服主体部分逐渐显示的效果。当鼠标离开软为什么对象的时候，再通过调用相应的函数，使用setInterval()不断的减少左边的属性值来实现客服主体部分的逐渐隐藏。

软为什么对象顶端属性值在这里可能是个难点，它实现了当拖动滚动条的时候，客服系统具有比较任性的"弹性"的感觉，并且最终能够固定在距离窗口顶端100像素的垂直位置上，此效果是结合a函数和setInterval(a，10 parseInt(Math.random()*20))实现的，这里简单介绍一下a函数的原理，主要是个数学问题：

我们想要达到的效果是，无论你怎么拖动滚动条，客服系统最终都会在垂直位置距离窗口上边缘100px，也就是说，你只需要将top属性值设置为d1.scrollTop或者d2.scrollTop加100px。以下是对A函数：的简要分析

在math.max (d1.scrolltop，d2.scrolltop) _ top-parsent(me.style.top)中，math.max (d1.scrolltop，D2 . scroll top)_ top是me . style . top的最终值，在使用setInterval()函数循环执行a函数的过程中，即连续执行parsent(me . style . top)(math . max(D1 . scroll top，D2 . scroll top)_ top-parsent(me . style . top))* 0.1 ' px '，When风格。top=数学。最大(d1。scrolltop，d2。scrolltop) _ top，客服系统固定在指定位置。

以上就是本文的全部内容，希望大家喜欢。