• 下拉导航菜单


    用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';
    };
    };
  • 相关阅读:
    [leetcode-135-Candy]
    [leetcode-151-Reverse Words in a String]
    [leetcode-139-Word Break]
    [leetcode-129-Sum Root to Leaf Numbers]
    [leetcode-143-Reorder List]
    [leetcode-141-Linked List Cycle]
    oracle 环境变量(中文显示乱码)
    Oracle 自增长id
    Spring.net 事件的注入
    Spirng.net 替换任意方法
  • 原文地址:https://www.cnblogs.com/lijianming180/p/12288806.html
Copyright © 2020-2023  润新知