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';
    };
    };
  • 相关阅读:
    java 集合类说明与区别
    JAVA集合LIST MAP SET详解
    ThinkPHP文件上传
    ThinkPHP表单操作(未加验证)
    常用的正则表达式大全
    ThinkPHP模板替换
    ThinkPHP包含文件
    example_UEditor富文本编辑器
    ThinkPHP快捷方法汇总(随时添加)
    页面编码统一(转载)
  • 原文地址:https://www.cnblogs.com/lijianming180/p/12288806.html
Copyright © 2011-2022 走看看