带有动画效果的javaｓｃｒｉｐｔ导航菜单

虽然有很多插件，但为了共同提高，我做了一系列的Javaｓｃｒｉｐｔ系列实例，我们分享的前辈们如果有好的建议，请指出，以免误人子弟啊！

今天是第一场战争：动画菜单，并生效，如下所示：（一个小丑陋的风格（- -））

（由于撰写本文时使用的编辑器不同，暂时没有添加演示效果，这里是完整的代码和演示）。
动画效果：鼠标悬停改变所有目标的背景和字体颜色。鼠标移动到家庭导航，显示以下组菜单。有子组中的菜单，点击放大超过效果的动画。此外，您可以添加和删除导航菜单和子菜单的自由，不影响效果！

你是怎么意识到的
步骤1：你用什么来实现菜单HTML代码设计如下，遵循JS代码与HTML代码分离的原则！你不能在这里看到js代码
在使用样式之前看起来是这样的：非常旧！！！
第二步：CSS样式。鼠标悬停改变所有目标的背景和字体颜色，直接使用CSS的过渡和悬停，而其他CSS样式布局没有列出。
# UL {
的…
Z指数：100；
}
# ul {
显示：内联块；
职位：相对；
顶部：0；
左：- 25px；
宽度：10%；
最小宽度：70px；
身高：30px；
文本对齐：中心；
行高：30px；
border: 1px solid灰色；
边界半径：10px；
背景颜色：爱丽丝蓝；
光标：指针；
WebKit的过渡：所有缓解了0.3s；
-moz过渡：所有缓解了0.3s；
MS过渡：所有缓解了0.3s；
- O转换：所有缓解了0.3s；
过渡：所有缓解了0.3s；
}
# ul：悬停{背景颜色：海蓝宝石；颜色：红色；}
…
显示隐藏：悬停{背景颜色：米色}
a-div {。
背景颜色：海蓝宝石；
边界半径：10px；
颜色：黑色；
显示：无；
不透明度：0
}
一个{。
Z指数：1；
显示块；
…
}

第三步：这一步是重点。如果你将事件监听器添加到每个菜单选项和组中，你会感到非常麻烦，代码量会更多。是否有任何方法在元素上添加监视来实现它

答案必须在那里，使用事件的冒泡机制！将事件侦听器添加到父UL标记中，并且在侦听函数中直接更改触发事件的元素样式是可以的。很简单！

代码如下：

VaR UL = document.getelementbyid（'ul）；
Ul.addEventListener（'mouseover '，listener1，假）；
Ul.addEventListener（'mouseout '，listener2，假）；
Ul.addEventListener（听到咔哒声，listener3，假）；
因为IE8及以下版本不注册侦听器，如果你想兼容，你必须添加相应的代码attachevent。

第四步：主导作用！实施listener1，listener2，listener3监控功能。

首先，最简单的listener1函数，代码如下：

功能listener1（事件）{
/ /事件=事件| | window.event； / / IE8，与以前的版本兼容
VaR目标=事件。目标| | event.srcelement； / / IE8，与以前的版本兼容
如果（目标。tagname。toLowerCase）（=李）{
VaR DIV1 = target.getelementsbytagname（'div）{ 0 }；
div1.style.display =阻止；
var I＝0；
var id；
（函数富（）{
如果（我> = 1）{清除定时器（ID）；ID = null；回报；}
我= 0.2；
Div1.style.opacity = I;
ID = setTimeout（function（）{清除定时器（ID）；foo（）}，30）；

}）；

}

}
以同样的方式，一切都是为IE8及以上版本，U3000 U3000

1。因为它的事件没有目标性，只有相对的srcelement属性是应得的

2。这一事件=事件| | window.event；这里其实可以省略，仅当使用属性来设置注册事件，如ul.onmouseover（=功能）{ }，或IE8，和旧版本只能通过window.event获取当前事件对象

好了，现在你得到了当前触发事件的目标，它简单得多，可以通过它改变自己和它的亲属！

以下是listener2功能，这时触发mouseout使用，主要操纵目标子元素div，并且代码如下：
功能listener2（事件）{
/ /事件=事件| | window.event；
var =目标目标| | event.srcelement事件；
如果（目标。tagname。toLowerCase）（=李）{
VaR DIV1 = target.getelementsbytagname（'div）{ 0 }；
div1.onmouseover =函数（）{
div1.style.display =阻止；
div1.style.opacity = 1；
}；
div1.onmouseout =函数（）{
div1.style.display =不关；
div1.style.opacity = 0；
}；
div1.style.display =没有人'； / /这群是实现当从顶部出隐DIV1鼠标
div1.style.opacity = 0；
}
}

好的，我们已经实现了大部分的结果，最后一步是1个主要角色：listener3功能，它主要负责缩放效果时，单击。

实现原理：

1。功能在一个布尔变量的定义作为一个开关，鼠标点打开，然后点了；

2。通过setTimeout实现动画效果，动态地改变高度和子菜单的透明度属性，以及显示属性；

完整的代码如下所示：
var bool =真；
功能listener3（事件）{
var =事件| | window.event事件；
VaR目标= event.target event.srcelement | |；
如果（target.classname = 'show-hide）{
VaR target.parentelement母=；
VaR艾迪维= parent.getelementsbyclassname（'a-div）{ 0 }；
如果（（艾迪维window.getcomputedstyle，null）。透明度> 0.5）{ bool =假} { } bool =真正的人
var高度= 90，
ChangeH，
不透明度，
身份证件;
如果（bool）{
changeh = 0；
不透明度= 0；
target.innerhtml = '金融'；
（函数显示（）{
如果（changeh >高度）{清除定时器（ID）；返回}
changeh = 5；
不透明度= 0.06；
/ /（艾迪维console.log 'opacity：+ +。风格。不透明，艾迪维高度：+。风格。高度）；
adiv.style.height = changeh + 'px；
adiv.style.opacity =不透明；
adiv.style.display =阻止；
ID = setTimeout（）{（）函数（
ClearTimeout（ID）；
显示（）；
}，16.7）；
}）；

bool = false；
{人}
changeh =高度；
不透明度= 1；
target.innerhtml =+金融；
（函数隐藏（）{
如果（changeh＜0）{清除定时器（ID）；adiv.style.display =不关；回归}
changeh = 10；
不透明度= 0.11；
/ /（艾迪维console.log 'opacity：+ +。风格。不透明，艾迪维高度：+。风格。高度）；
adiv.style.height = changeh + 'px；
adiv.style.opacity =不透明；
ID = setTimeout（）{（）函数（
ClearTimeout（ID）；
隐藏（）；
}，16.7）；
}）；
bool =真；
}
}
}
注意几点：

1。记得清楚的setTimeout的ID，然后退出，否则死循环，如（changeh＜0）{清除定时器（ID）；adiv.style.display =不关；回归}

对2.settimeout延迟时间设置为16.7，因为它满足了屏幕的刷新率60fps和看起来很舒服

3期间。调试过程中，在建立changeh和混浊的增量交付价值，记得要打印出来，方便调试。

（'opacity艾迪维console.log：+ +。风格。不透明，艾迪维高度：+。风格。高度）；

4。最后，实现整个菜单，关键是下面这一个，如果不是这一个，你可以不完美，所有功能的实现，如：你点开一组的子菜单，然后移动到其他组中单击时，情况就会大不相同；而这样做的原因window.getcomputedstyle是当你第一次打开，任何1组没有回应，因为直接通过在第一时间点的不透明度值event.target。

如果（（艾迪维window.getcomputedstyle，null）。透明度> 0.5）{ bool =假} { } bool =真正的人；

然而，这getcomputedstyle方法不支持下的IE9和IE的元对象有一个currentstyle属性；

如果您对CSS的处理不太熟悉，请看一下我的摘要：用原生js读写CSS样式

如果你想知道更多关于的setTimeout（）方法的应用，看这个：你真的知道怎样setTimeout的作品吗

对于事件的处理机制，您可以看看这一点：DOM中事件处理的概述和原理的全面分析。

以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。