JavaScript实战之带收放动画效果的导航菜单

前端之家收集整理的这篇文章主要介绍了JavaScript实战之带收放动画效果的导航菜单前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

虽然有很多插件可用,但为了共同提高,我做了一系列JavaScript实战系列的实例,分享给大家,前辈们若有好的建议,请务必指出,免得误人子弟啊! 今天是第一战:带收放动画效果菜单效果如下图:(样式有点丑(-^-)) ( 由于在写本文时,用的编辑器不同,暂时添加不了演示效果,这里有:

动画效果:鼠标hover改变所有目标的背景和字体颜色,鼠标移动到‘首页导航',显示下面的分组菜单,分组菜单有子菜单,点击可缩放,带动画过度效果!而且,可以随便添加和删除导航菜单和子菜单,不影响效果!

如何实现呢?

第一步:用什么来实现菜单?HTML代码设计如下,遵循JS代码和HTML代码分离的原则!这里你看不到一句JS代码

未应用样式之前是这个样子的:很古老吧!!!

第二步:CSS样式。鼠标hover改变所有目标的背景和字体颜色,直接用CSS的transition和:hover,而其他的CSS样式布局就不全部列举了,大家自己动手吧,主要注意以下几点:

第三步:这一步是重点。如果给每个菜单选项和分组都添加事件监听,个人觉得好麻烦,且代码量肯定多不少,有没有什么办法就在一个元素上加监听就能实现呢?

答案肯定是有的,利用事件的冒泡机制!在父元素ul标签上添加事件监听,而在监听函数里直接改变触发事件的元素样式就可以了,就这么简单!

代码如下:

因为IE8及以下版本没有addEventListener,如果要兼容,还得加attachEvent对应的代码。

:主角登场!实现listener1、listener2、listener3监听函数。

首先来最简单的listener1函数,代码如下:

=1){clearTimeout(id);id=null;return;} i+=0.2; div1.style.opacity = i; id = setTimeout(function(){clearTimeout(id);foo()},30);  

    })();  

 }

}

同样,一切为了IE8及更旧版本。  

1.因为它的event没有target属性,只有相对应得srcElement属性  

2.而这一句event = event||window.event;这里其实是可以省略的,只有当用属性来设置注册事件监听时,如ul.onmouseover = function(){},或

猜你在找的JavaScript相关文章