水平伸缩动画导航菜单实现详解

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

本章节分享一个简单的导航菜单实现过程,需要的朋友可以做一下参考。

当鼠标悬浮于导航菜单之上时候,菜单会出现水平伸缩效果。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
#con div {
  width: 100px;
  margin: 5px 0 5px 0;
  font-size: 9pt;
  height: 23px;
  color: white;
}
</style>
<script>
function $(e) {
  return document.getElementById(e);
}
function roulMenu(e, maxW, minW) {
  var divs = $(e).getElementsByTagName('div');
  for (var index = 0; index < divs.length; index++) {
    (function (index) {
      var tims, timss;
      divs[index].onmouseover = function () {
        var self = this;
        clearInterval(timss);
        tims = setInterval(function () {
          if (self.offsetWidth < maxW) {
            self.style.width = self.offsetWidth + 5 + 'px';
          }
          else {
            clearInterval(tims);
          }
        }, 10);
      }
      divs[index].onmouseout = function () {
        var self = this;
        clearInterval(tims);
        timss = setInterval(function () {
          if (self.offsetWidth > minW) {
            self.style.width = self.offsetWidth - 5 + 'px';
          }
          else {
            clearInterval(timss);
          }
        }, 10);
      }
    })(index);
  }
}
window.onload = function () {
  roulMenu('con', 200, 100);
}     
</script>
</head>
<body>
<div id="con">
  <div style="background-color:red">红色菜单</div>
   <div style="background-color:green">绿色菜单 </div>
   <div style="background-color:blue">蓝色</div>
   <div style="background-color:yellow">黄色</div>
   <div style="background-color:pink">这是什么色</div>
   <div style="background-color:orange">桔色</div>
   <div style="background-color:black">黑色超酷</div>
 </div>
</body>
</html>

上面的代码实现了动画效果,下面介绍一下它的实现过程。

一.代码注释:

(1).function $(e) {

  return document.getElementById(e);

},返回id属性值为e的元素对象。

(2).function roulMenu(e, maxW, minW) {},第一个参数规定菜单父元素的id属性值,第二个参数规定菜单的最大宽度,第三个参数规定菜单的最小宽度。

(3).var divs = $(e).getElementsByTagName('div'),获取父元素下所有的div元素集合。

(4).for (var index = 0; index < divs.length; index++) ,遍历div集合中的么一个元素。

(5).(function (index) {})(index),通过闭包的方式来为元素注册事件处理函数。

(6).var tims, timss,声明两个变量用作定时器函数的标识。

(7).divs[index].onmouseover = function () {},为元素注册onmouseover事件处理函数。

(8).var self = this,把当前div元素的引用赋值给变量self。

(9).clearInterval(timss),停止上一个动画,防止鼠标连续悬浮于同一个菜单,造成定时器函数叠加执行。

(10).tims = setInterval(function () {

  if (self.offsetWidth < maxW) {

    self.style.width = self.offsetWidth + 5 + 'px';

  }

  else {

    clearInterval(tims);

  }

}, 10),通过定时器函数的方式设置元素的宽度。

二.相关阅读:

(1).getElementsByTagName()方法可以参阅document.getElementsByTagName()一章节。

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

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

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

(5).offsetWidth可以参阅js offsetWidth一章节。

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

网站出售中,有意者加微信:javadudu

回复

我来回复
  • 暂无回复内容