JavaScript实战中具有伸缩动画效果的导航菜单

时间：2021-09-07 来源：互联网编辑：宝哥软件园浏览：次

虽然有很多插件可用，但为了一起改进，我做了一系列JavaScript实战系列的例子，分享给大家。如果前辈有好的建议，请一定要指出来，以免出错！今天是第一战：带动画效果的菜单，效果如下：(风格有点难看(-)(因为写这篇文章用的编辑器不一样，演示效果暂时不能加，这里有：最终完整的代码和演示)

动画效果：鼠标悬停改变所有目标的背景和字体颜色，鼠标移动到‘Home Navigation’显示如下分组菜单，有子菜单，点击即可缩放，具有过动画效果！而且可以随意添加和删除导航菜单和子菜单，不影响效果！

如何实现？

第一步：用什么实现菜单？HTML代码设计如下，遵循JS代码和HTML代码分离的原则！这里看不到JS代码

在应用样式之前，它看起来是这样的：非常旧！

第二步：CSS样式。鼠标悬停改变所有目标的背景和字体颜色，直接使用CSS转场和：悬停，其他CSS样式的布局没有全部列出。自己动手吧，主要注意以下几点：

#ul{.z-index : 100；} # ul Li { display : inline-block；相对位置：top : 0；left :-25px；宽度：10%；最小宽度： 70px；height: 30px文本对齐：中心；线高： 30px；border: 1px纯灰色；border-radius :10 px；背景-color : aliceblue；cursor:指针；-WebKit-transit :全轻松进出0.3s-moz-transit :全轻松进出0.3s-ms-transit :全轻松进出0.3s-o-transit :所有进出0.3stransition:所有进出0.3s} # ul li: hover { background-color :海蓝宝石；颜色：红色；} .show-hide : hover { background-color :米色}。a-div{底色-颜色：海蓝宝石；border-radius :10 px；color:黑色；display:无；opacity: 0 }。a { z-index :-1；display:块；第三步：这一步是重点。如果在每个菜单选项和分组中添加事件监控，就会发现很麻烦，代码量肯定很多。有什么方法可以将监控添加到一个元素中？

答案肯定是肯定的，用事件的冒泡机制！将事件监视器添加到父元素的ul标记中，并在monitor函数中更改直接触发事件的元素的样式。就这么简单！

代码如下：

var ul=document . getelementbyid(' ul ')；ul.addEventListener('mouseover '，listener1，false)；ul.addEventListener('mouseout '，listener2，false)；ul.addEventListener('click '，listener3，false)；因为IE8及以下版本没有addEventListener，所以如果兼容，就必须添加与attachEvent对应的代码。

第四步：主角出现！实现listener1、listener2和listener3监听功能。

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

函数listener 1(event){//event=event | | window . event；//兼容iee8及以前版本var target=event . target | | event . srcelelement；//与IE8和早期版本兼容if(target . tagname . to lower case()===' Li '){ var div 1=target . getelementsbyname(' div ')[0]；div 1 . style . display=' block '；var I=0；var id(function foo(){ if(I=1){ cleartime out(id))；id=null返回；} i=0.2div 1 . style . opacity=I；id=setTimeout(function(){ cleartime out(id))；foo()}，30)；})();}}同样，一切都是为了IE8和更老的版本。

1.因为它的事件没有目标属性，只有对应的srcElement属性

2.而这句话事件=event | | window.event其实这里可以省略。仅当注册事件监视设置了属性时，如ul.onmouseover=function(){}，或ul onmouseover='func '，IE8及更早版本只能通过window.event获取当前事件对象

好了，现在我们有了当前触发事件的目标，事情就简单多了，我们可以通过它改变自己和它的亲人！

下面是听众2函数，用在鼠标移出时触发，主要是操控目标的子元素DIV，代码如下：

函数监听器2(事件){//事件=事件| |窗口。事件；var target=事件。目标| |事件。srcelelementif(目标。标记名。tolowercase()==' Li '){ var div 1=target。getelementsbytagname(' div ')[0]；1区。onmouseover=function(){ div 1。风格。display=' blockdiv1.style。不透明度=1;};1区。onmouseout=function(){ div 1。风格。显示='无'；div1.style。不透明度=0;};1区。风格。显示='无'；//这一组是为了实现当鼠标从上方出去时隐藏div1 div1.style。不透明度=0;} } 好了，到这里，已经实现了大部分效果了，还有最后一步，那就是一号主角了：听众3函数，它主要负责鼠标点击时的缩放效果！

实现原理：

1.函数外面定义一个弯曲件变量当做开关，鼠标点一下开，再点一下关；

2.通过setTimeout来实现动画效果，动态的改变子菜单的高度和不透明属性，还有显示属性；

完整代码如下：

1.记得清除setTimeout的身份证，然后退出，否则死循环，如if(changeH 0){清除超时(id)；adiv。风格。显示='无'；返回}

2 .设置超时的延迟时间设置为16.7是因为符合屏幕的刷新率60FPS，看着舒服

3.调试过程中，设置变更和不透明的递增递减值时，记得打印出来，方便调试：

控制台。log(' opa city 3360 ' adiv。风格。不透明度'，高度： ' adiv。风格。高度)；

4.最后，整个菜单的实现中，最关键的是下面这一句，如果没有这一句，你无法完美实现所有功能，比如：你点开一组子菜单，然后移动到其它组点击的时候，情况将有很大不同；而window.getComputedStyle用这个的原因是，首次打开时，点任意组的第一下都没反应，因为直接通过事件。目标在点第一下时是取不到不透明值的。

if(窗口。getcomputedstyle(adiv，null)。opa city 0.5){ bool=false } else { bool=true }；

不过，IE9以下不支持getComputedStyle方法，IE的元素对象有当前样式属性；

如果你对半铸钢钢性铸铁(铸造半钢)的处理不是很熟悉，看看我的总结：用原生射流研究…读写半铸钢钢性铸铁(铸造半钢)样式的方法总结

如果你想多了解setTimeout()方法的应用，看看这个：你真的知道setTimeout是如何运行的吗

对于事件的处理机制，可以看看这个：DOM中的事件处理概览与原理的全面剖析

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。