fgm实例练习笔记-4.1 setTimeout应用

整体思路就是写一个动态的导航栏，鼠标划到.onmouseover每个选项上显示包含的内容（下一级的nav），鼠标离开.onmouseout0.3秒（300毫秒）后，下一级nav自己消失display:none;，此处用到延迟setTimeout（）；

页面布局方面，导航栏使用了雪碧图，给每一部分设置好background-position: 导航栏每一项和下一级nav的每一项有:hover 效果。

Html部分，一级nav是ul和li，每个选项是<a>。二级nav包含在每一个li内，箭头是<em>,而二级nav没有再采用ul，而是设置了<p>和<span>,每个选项依然是<a>。

缩进！一定记得缩进！！！

新接触到的：white-space:nowrap； CSS的white-space属性，规定如何处理元素中的空白符，nowrap是不换行。

script部分，自己写不出来这么完善的。原版：

<script>
    //get就是一对象Object，包含以下几个函数，按Id查，按className查，按TagName查
    var get = {
        byId: function(id) {
            return document.getElementById(id)
        },

        byClass: function(sClass, oParent) {
            var aClass = [];
            var reClass = new RegExp("(^| )" + sClass + "( |$)");
            var aElem = this.byTagName("*", oParent);
            for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);
            return aClass
        },//根据className获取元素

        byTagName: function(elem, obj) { 
            return (obj || document).getElementsByTagName(elem)
        }
    };//建立外部函数，调用

    window.onload = function ()
    {
        var oNav = get.byId("nav");//获取整个导航栏div
        var aLi = get.byTagName("li", oNav);//获取nav下的li组
        var aSubNav = get.byClass("hidden", oNav);//获取所有hidden类
        var oSubNav = oEm = timer = null;
        var i = 0;

        for (i = 1; i < aLi.length; i++)
        {
            aLi[i].onmouseover = function ()
            {
                //隐藏所有子菜单
                for (i = 0; i < aSubNav.length; i++)aSubNav[i].style.display = "none";

                //获取该项下的子菜单
                oSubNav = get.byClass("hidden", this)[0];

                //获取该项下的指示箭头
                oEm = get.byTagName("em", this)[0];

                //显示该项下的子菜单
                oSubNav.style.display = "block";

                //判断显示区域
                oNav.offsetWidth - this.offsetLeft > oSubNav.offsetWidth ?

                    //如果在显示范围居左显示
                        oSubNav.style.left = this.offsetLeft + "px" :

                    //超出显示范围居右显示
                        oSubNav.style.right = 0;

                //计算指标箭头显示位置
                oEm.style.left = this.offsetLeft - oSubNav.offsetLeft + 50 + "px";
                clearTimeout(timer);

                //阻止事件冒泡
                oSubNav.onmouseover = function (event)
                {
                    (event || window.event).cancelBubble = true;
                    clearTimeout(timer)
                }
            };
                //鼠标离开nav 0.3秒后subnav消失
            aLi[i].onmouseout = function ()
            {
                timer = setTimeout(function () {
                    oSubNav.style.display = "none"
                },300)
            }
        }
    };
</script>

动态计算了下一级nav的显示位置（居左/右），和箭头位置：

obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。
obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。
obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。
obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。

阻止事件冒泡cancelBubble