具有缓冲效果的侧栏展开客服系统
具有缓冲效果的侧栏展开客服系统属于前端实例代码，有关更多实例代码大家可以查看。
侧栏客服系统是一种常用效果，鼠标悬浮的时候能够展开，离开的时候收缩。
展开和收缩过程通常具有缓冲效果，下面就通过代码实例介绍一下如何实现此功能。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
div {
margin: 0;
padding: 0;
}
.odiv {
width: 200px;
height: 200px;
background: #f00;
position: relative;
left: -200px;
top: 100px;
}
.sdiv {
width: 20px;
height: 60px;
background: #00f;
position: absolute;
top: 70px;
right: -20px;
}
</style>
<script language="javascript">
window.onload = function () {
var odiv = document.getElementById('odiv');
odiv.onmouseover = function () {
startMover(0);
}
odiv.onmouseout = function () {
startMover(-200);
}
}
var timer = null;
function startMover(itarget) {
clearInterval(timer);
var odiv = document.getElementById('odiv');
timer = setInterval(function () {
var speed = (itarget - odiv.offsetLeft) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (odiv.offsetLeft == itarget) {
clearInterval(timer);
}
else {
odiv.style.left = odiv.offsetLeft + speed + 'px';
}
}, 30);
}
</script>
</head>
<body>
<div id="odiv" class="odiv">
<div id="sdiv" class="sdiv"></div>
</div>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.window.onload = function () {}，当文档内容完全加载完毕再去执行函数中的代码。
（2）.var odiv = document.getElementById('odiv')，获取id属性值为odiv的元素对象。
（3）.odiv.onmouseover = function () {
startMover(0);
}，为元素注册onmouseover 事件处理函数。
（4）.odiv.onmouseout = function () {
startMover(-200);
}，为元素注册onmouseout事件处理函数。
（5）.var timer = null，声明一个变量并赋值为null，用作定时器函数的标识。
（6）.function startMover(itarget) {}，此方法实现了缓冲运动效果，参数是目标值。
（7）.clearInterval(timer)，停止定时器函数的运行，否则的如果鼠标连续移入移出的话会导致多个定时器函数叠加执行。
（8）.var odiv = document.getElementById('odiv')，获取元素对象。（9）.timer = setInterval(function () {},30)，通过定时器函数每隔30秒执行一次匿名函数，也就实现运动效果。
（10）.var speed = (itarget - odiv.offsetLeft) / 10，缓冲动画的速度参数变化值
（11）.speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed),如果速度是大于0，说明是向右走，那么就向上取整
（12）.if (odiv.offsetLeft == itarget) {
clearInterval(timer);
}，如果达到目标值，那么停止定时器函数的执行。
（13）. else {
odiv.style.left = odiv.offsetLeft + speed + 'px';
}，否则的话继续设置left属性值，也就是继续动画效果。
二.相关阅读:
（1）.onmouseover事件参阅javascript mouseover事件一章节。
（2）.onmouseout事件参阅javascript mouseout事件一章节。
（3）.clearInterval()参阅clearInterval()一章节。
（4）.setInterval()参阅setInterval()一章节。
（5）.offsetLeft参阅offsetleft一章节。
（6）.Math.ceil()参阅javascript Math.ceil()一章节。
（7）.Math.floor()参阅javascript Math.floor()一章节。
具有缓冲效果的侧栏展开客服系统，这样的场景在实际项目中还是用的比较多的，关于具有缓冲效果的侧栏展开客服系统就介绍到这了。