具有缓冲效果的侧栏展开客服系统

2018-4-11 00:21| 作者: antzone| 查看: 517| 评论: 0|来自: 蚂蚁部落

侧栏客服系统是一种常用效果,鼠标悬浮的时候能够展开,离开的时候收缩。

展开和收缩过程通常具有缓冲效果,下面就通过代码实例介绍一下如何实现此功能。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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()一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部