javascript实现在线客服效果_javascript技巧
CSS
html
JS
以上代码实现了我们想要的在网页一侧漂浮的客服系统。下面就简单介绍一下如何实现次效果:
一.实现原理:
将整个客服系统所在的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的时候,客服系统也就是固定在指定的位置了。
以上所述就是本文的全部内容了,希望大家能够喜欢。
上一篇: JavaScript 格式字符串的应用_javascript技巧
下一篇: php 乱码问题分析