zoukankan      html  css  js  c++  java
  • 下拉导航菜单

    用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';
    };
    };
  • 相关阅读:
    算法分析实验题集
    程序猿怎样解除烦恼
    MYSQL设计优化
    模式匹配KMP
    ios创建画笔的样例(双笔画效果)
    命令行解析器
    作业还是作孽?——Leo鉴书79
    客户机增加域 及server文件共享
    MySQL教程及经常使用命令1.1
    jsTree插件简介(三)
  • 原文地址:https://www.cnblogs.com/lijianming180/p/12288806.html
Copyright © 2011-2022 走看看