javascript元素匀速运动代码实例

快乐打工仔 分类:实例代码

匀速运动是一种简单的动画效果,下面就通过代码实例介绍一下如何利用javascript实现此功能。

代码实例如下:

<!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 = 0;
    if (odiv.offsetLeft > itarget) {
      speed = -1;
    }
    else {
      speed = 1;
    }
    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);

},为odiv元素注册onmouseover事件处理函数。

(4).odiv.onmouseout = function () {

  startMover(-200);

},为odiv元素注册onmouseout事件处理函数。

(5).var timer = null,声明一个变量作为定时器函数的标识。

(6).function startMover(itarget) {},此函数实现了匀速动画,参数就是目标值。

(7).clearInterval(timer),停止上一个定时器函数的执行,否则的鼠标连续悬浮或者离开会导致多个定时器函数重复执行。

(8).var odiv = document.getElementById('odiv'),获取元素对象。

(9).timer = setInterval(function () {},30),每隔30毫秒执行一次匿名函数。

(10).var speed = 0,声明一个变量并赋值为0,下面会用到。

(11).if (odiv.offsetLeft > itarget) {

  speed = -1;

}else {

  speed = 1;

}

如果odiv.offsetLeft值大于目标值,那么就将speed设置为-1,否则的话赋值为1。

(12).if (odiv.offsetLeft == itarget) {

  clearInterval(timer);

},如果达到目标值,则停止定时器函数的运行。

(13).else {

  odiv.style.left = odiv.offsetLeft + speed + 'px';

},否则的话就设置odiv.style.left。

二.相关阅读:

(1).onmouseover事件可以参阅javascript mouseover事件一章节。

(2).onmouseout事件可以参阅javascript mouseout事件一章节。

(3).clearInterval()可以参阅clearInterval()一章节。

(4).setInterval()可以参阅setInterval()一章节。

(5).offsetLeft可以参阅offsetleft一章节。

回复

我来回复
  • 暂无回复内容