fgm实例练习笔记-4.1 setTimeout应用
2017-07-15 22:03
519 查看
整体思路就是写一个动态的导航栏,鼠标划到
页面布局方面,导航栏使用了雪碧图,给每一部分设置好
Html部分,一级nav是ul和li,每个选项是
缩进!一定记得缩进!!!
新接触到的:
script部分,自己写不出来这么完善的。原版:
动态计算了下一级nav的显示位置(居左/右),和箭头位置:
obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素。
obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素。
obj.offsetWidth 指 obj 控件自身的宽度,整型,单位像素。
obj.offsetHeight 指 obj 控件自身的高度,整型,单位像素。
阻止事件冒泡cancelBubble
.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
相关文章推荐
- fgm实例练习笔记-1.6记住密码提示框
- fgm实例练习笔记-2.6图片列表:鼠标移入/移出改变图片透明度
- fgm实例练习笔记-1.4用循环将三个Div变成红色
- fgm实例练习笔记-2.3求出数组中所有数字的和
- fgm实例练习笔记-3.4比较数字大小
- fgm实例练习笔记-1.2网页换肤
- fgm实例练习笔记-2.4弹出层效果
- fgm实例练习笔记-1.3函数接收参数并弹出
- fgm实例练习笔记-1.5js写css hover选择器
- fgm实例练习笔记-3.7网页计算器
- fgm实例练习笔记-2.5页面加载后自加一
- fgm实例练习笔记-2.5函数传参,改变Div任意属性的值
- fgm实例练习笔记-2.11鼠标移过改变图片路径
- fgm实例练习笔记-3.8简易网页时钟
- fgm实例练习笔记-2.1点击展开下拉列表
- fgm实例练习笔记-3.9倒计时
- Unix学习笔记-------Unix编程实例练习
- 学习笔记2017.07.11-day8,pm-HTML实例练习
- 原生JS实例练习——控制div属性—— JS学习笔记2015-8-4(第93天)
- Unix学习笔记-----编程练习实例------使用vfork&&execv()在程序中加载可执行程序