用JavaScript源码实现一些效果虽然代码有点繁琐,但是是掌握JavaScript最好方式。只有掌握了原生方法,以后对于jQuery等框架,才能了解的更深入。
实现下拉导航菜单基本过程
- 通过id选取元素。
- 设置鼠标事件移入事件及获取元素的style属性为block显示元素。
- 定义定时器的变量null,然后先清除定时器。
- 设置鼠标移出事件,并设置定时器及获取元素的style属性为none隐藏元素。
- 设置元素的子侧边栏元素鼠标移入事件及style属性为block显示,同时清除定时器。
- 设置元素的子侧边栏元素鼠标移出事件及style属性为none隐藏元素。
##JavaScript代码实例
window.onload=function(){
var oDt = document.getElementById('dt1');
var oDd = document.getElementById('dd1');
var oCx = document.getElementById('cx');
oDt.onmouseover=function(){
oDd.style.display = 'block';
};
var 大专栏 下拉导航菜单timeer = null;
clearTimeout(timeer);
oDt.onmouseout = function(){
timeer = setTimeout(function(){
oDd.style.display = 'none';
},10);
};
oDd.onmouseover=function(){
clearTimeout(timeer);
this.style.display = 'block';
oCx.style.display = 'block';
};
oDd.onmouseout=function(){
this.style.display = 'none';
oCx.style.display = 'none';
};
};