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

虽然有很多插件可用,但为了共同提高,我做了一系列JavaScript实战系列的实例,分享给大家,前辈们若有好的建议,请务必指出,免得误人子弟啊!

( 原创文章,转摘请注明:苏服:http://www.cnblogs.com/susufufu/p/5768402.html )

今天是第一战:带收放动画效果的菜单,效果如下图:(样式有点丑(-^-))

动画效果:鼠标hover改变所有目标的背景和字体颜色,鼠标移动到‘首页导航’,显示下面的分组菜单,分组菜单有子菜单,点击可缩放,带动画过度效果!

如何实现呢?

第一步:用什么来实现菜单?HTML代码设计如下

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

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

        #ul{
            ....
            z-index: 100;
        }
        #ul li{
            display: inline-block;
            position: relative;
            top: 0;
            left: -25px;
            width: 10%;
            min-width: 70px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            border: 1px solid gray;
            border-radius:10px;
            background-color: aliceblue;
            cursor: pointer;
            -webkit-transition: all ease-in-out 0.3s;
            -moz-transition: all ease-in-out 0.3s;
            -ms-transition: all ease-in-out 0.3s;
            -o-transition: all ease-in-out 0.3s;
            transition: all ease-in-out 0.3s;
        }
        #ul li:hover{background-color: aquamarine;color: red;}
        ...
        .show-hide:hover{background-color: beige}
        .a-div{
            background-color: aquamarine;
            border-radius:10px;
            color: black;
            display: none;
            opacity: 0
        }
        .a{
            z-index: -1;
            display: block;
            ...
        }                      
第三步:这一步是重点。如果给每个菜单选项和分组都添加事件监听,个人觉得好麻烦,且代码量肯定多不少,有没有什么办法就在一个元素上加监听就能实现呢?

答案肯定是有的,利用事件的冒泡机制!在父元素ul标签上添加事件监听,而在监听函数里直接改变触发事件的元素样式就可以了,就这么简单!代码如下:
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函数,代码如下:
function listener1(event){
    //event = event||window.event; //兼容IE8及以前版本
    var target = event.target||event.srcElement; //兼容IE8及以前版本
    if(target.tagName.toLowerCase() === ‘li‘){
        var div1 = target.getElementsByTagName(‘div‘)[0];
        div1.style.display = ‘block‘;
        var i = 0;
        var id;
        (function foo(){
            if(i>=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(){},或<ul onmouseover=‘func‘>,IE8及更旧版本只能通过window.event来取得当前的Event对象
好了,现在获得了当前触发事件的target,事情就简单很多了,通过他就可以改变它自己和它的亲戚!下面是listener2函数,用在mouseout时触发,主要是操控target的子元素DIV,代码如下:
           function listener2(event){
                //event = event||window.event;
                var target = event.target||event.srcElement;
                if(target.tagName.toLowerCase() === ‘li‘){
                    var div1 = target.getElementsByTagName(‘div‘)[0];
                    div1.onmouseover = function(){
                        div1.style.display = ‘block‘;
                        div1.style.opacity = 1;
                    };
                    div1.onmouseout = function(){
                        div1.style.display = ‘none‘;
                        div1.style.opacity = 0;
                    };
                    div1.style.display = ‘none‘; //这一组是为了实现当鼠标从上方出去时隐藏div1
                    div1.style.opacity = 0;
                }
            }    
好了,到这里,已经实现了大部分效果了,还有最后一步,那就是1号主角了:listener3函数,它主要负责鼠标点击时的缩放效果!实现原理:  1.函数外面定义一个bool变量当做开关,鼠标点一下开,再点一下关;  2.通过setTimeout来实现动画效果,动态的改变子菜单的height和opacity属性,还有display属性;完整代码如下:
 1 var bool = true;
 2             function listener3(event) {
 3                 var event = event || window.event;
 4                 var target = event.target || event.srcElement;
 5                 if (target.className === ‘show-hide‘) {
 6                     var parent = target.parentElement;
 7                     var adiv = parent.getElementsByClassName(‘a-div‘)[0];
 8                     if (window.getComputedStyle(adiv,null).opacity>0.5){bool=false}else{bool=true}
 9                     var height = 90,
10                             changeH,
11                             opacity,
12                             id;
13                     if (bool) {
14                         changeH = 0;
15                         opacity = 0;
16                         target.innerHTML = ‘财经 -‘;
17                         (function show() {
18                             if (changeH > height) {clearTimeout(id);return}
19                             changeH += 5;
20                             opacity += 0.06;
21                             //console.log(‘opacity:‘+adiv.style.opacity+‘,height :‘+adiv.style.height);
22                             adiv.style.height = changeH + ‘px‘;
23                             adiv.style.opacity = opacity;
24                             adiv.style.display = ‘block‘;
25                             id = setTimeout(function () {                     clearTimeout(id);
26                                 show();
27                             }, 16.7);
28                         })();
29
30                         bool = false;
31                     } else {
32                         changeH = height;
33                         opacity = 1;
34                         target.innerHTML = ‘财经 +‘;
35                         (function hidden() {
36                             if (changeH < 0) {clearTimeout(id);adiv.style.display = ‘none‘;return}
37                             changeH -= 10;
38                             opacity -= 0.11;
39                             //console.log(‘opacity:‘+adiv.style.opacity+‘,height :‘+adiv.style.height);
40                             adiv.style.height = changeH + ‘px‘;
41                             adiv.style.opacity = opacity;
42                             id = setTimeout(function () {                     clearTimeout(id);
43                                 hidden();
44                             }, 16.7);
45                         })();
46                         bool = true;
47                     }
48                 }
49             }
注意几点:  1.记得清除setTimeout的ID,然后退出,否则死循环,如if (changeH < 0) {clearTimeout(id);adiv.style.display = ‘none‘;return}  2.setTimeout的延迟时间设置为16.7是因为符合屏幕的刷新率60FPS,看着舒服  3.调试过程中,设置changeH和opacity的递增递减值时,记得打印出来,方便调试:console.log(‘opacity:‘+adiv.style.opacity+‘,height :‘+adiv.style.height);  4.最后,整个菜单的实现中,最关键的是下面这一句,如果没有这一句,你无法完美实现所有功能,比如:你点开一组子菜单,然后移动到其它组点击的时候,情况将有很大不同;而window.getComputedStyle用这个的原因是,首次打开时,点任意组的第一下都没反应,因为直接通过event.target在点第一下时是取不到opacity值的。
if (window.getComputedStyle(adiv,null).opacity>0.5){bool=false}else{bool=true};

不过,IE9以下不支持getComputedStyle方法,IE的Element对象有currentStyle属性;

如果你对CSS的处理不是很熟悉,看看我的总结:用原生JS读写CSS样式的方法总结
如果你想多了解setTimeout()方法的应用,看看这个:你真的知道setTimeout是如何运行的吗
对于事件的处理机制,可以看看这个:DOM中的事件处理概览与原理的全面剖析
好了,到此结束,有不对和更好的地方,欢迎指教!
				
时间: 2025-01-02 14:58:21

JavaScript实战(带收放动画效果的导航菜单)的相关文章

Android 抽屉效果的导航菜单实现

抽屉效果的导航菜单 看了很多应用,觉得这种侧滑的抽屉效果的菜单很好. 不用切换到另一个页面,也不用去按菜单的硬件按钮,直接在界面上一个按钮点击,菜单就滑出来,而且感觉能放很多东西. 关于实现,搜索了一下,有如下两种: 1.用SlidingDrawer: http://developer.android.com/reference/android/widget/SlidingDrawer.html 但是不知道为什么这个类官方不建议再继续用了: Deprecated since API level

使用JavaScript和Canvas实现下雪动画效果

该下雪动画效果使用了HTML5中Canvas画布实现,其中涉及了物理学中曲线运动的相关知识与运算. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scal

javascript仿天猫加入购物车动画效果

  注意:首先需要声明的是:代码原思路不是我写的,是在网上找的这种效果,自己使用代码封装了下而已:代码中都有注释,我们最主要的是理解抛物线的思路及在工作中完成这样的任务,最近需要做类似于天猫加入购物车动画效果,所以就在网上搜索了下,就看到类似的效果,就把代码截下来自己封装了下~~ 如果想要了解抛物线的细节,我建议大家先 看下 张鑫旭 讲解的抛物线的文章,再来看如下JS代码,可能理解更深点~~ http://www.zhangxinxu.com/wordpress/2013/12/javascri

hover带有动画效果的导航

html,body{overflow-x:hidden;} ul,li{list-style: none;} .nav{width:100%; height: 26px; overflow: hidden;} .nav li{width: 100px; text-align: center; height: 26px; line-height: 26px; float: left; position: relative;} .nav li a{text-decoration: none; col

极客学院前端实战开发 网页小游戏/网页布局/导航/标签页/语音识别

===============课程目录===============<实战开发教程>├<1 围住神经猫-HTML5实战游戏开发教程>│  ├1. 围住神经猫-游戏玩法.mp4│  ├2.围住神经猫-使用createjs.mp4│  ├3. 围住神经猫-绘制页面元素.mp4│  ├4.围住神经猫-添加监听事件.mp4│  ├5.围住神经猫-简单的逻辑实现游戏效果.mp4│  ├6. 围住神经猫-完整游戏效果实现.mp4│  └<source>├<10 回到顶部功能实

android.support.v4.widget.DrawerLayout 抽屉效果导航菜单

抽屉效果导航菜单图示 如图所示,抽屉效果的导航菜单不用切换到另一个页面,也不用去按菜单的硬件按钮,直接在界面左上角的一个按钮点击,菜单就滑出来,而且感觉能放很多东西 概况:实现上图所示的抽屉效果的导航菜单有以下两种方式 方式1.用SlidingDrawer: http://developer.android.com/reference/android/widget/SlidingDrawer.html 但是不知道为什么这个类官方不建议再继续用了: Deprecated since API lev

Javascript动画效果(四)

Javascript动画效果(四) 前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下滚入的效果,那么那种效果是如何实现的呢? 首先我们我们完成该效果的html和css代码,代码如下: html部分代码: <div id="move"> <a href="#"><i><img src="images/1

Css3+jQuery打造的一款带动画效果的数字时钟

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Css3+jQuery打造的一款带动画效果的数字时钟丨任E行F9行车记录仪|gopro官网|电影院座椅|</title> <style type="text/css&quo

web前端入门到实战:CSS实现雨滴动画效果

玻璃窗 今天我们要实现的是雨滴效果,不过实现雨滴前,我们先把毛玻璃的效果弄出来,没有玻璃窗,雨都进屋了,还有啥好敲打的. <div class='window'></div> .window { position: absolute; width: 100vw; height: 100vh; background: url("https://cn.bing.com//th?id=OHR.ParrotsIndia_ZH-CN8386276023_UHD.jpg")