分享一个 原生javaScript - 用面向对象写的下拉菜单 - DropdownMenu

前言：

学习js一月有余，周末闲暇时间，继续学习。

学习进度：入门中；

学习资料：视频教程 / javaScript高级程序设计（第3版）

由来：

一直想做一个纯原生js的下拉菜单，参考了网上的许多例子，可是一直有bug无法解决。以往没有编程经验，自学起来真的不太容易。总体来说ECMAScript是个有意思的语言。

以下是我的学习作业，用面向对象写的：

// html 部分

    

    

    	

        	

            	首页AZURECLUB
            
            

            	机构ORGANIZATION
            
            

				资讯INFO
                

                        课程
                        假期
                        装备
                
            
            

            	产品TRAVEL
            
            

            	管家MANAGER
                

                        课程
                        假期
                        装备
                
            
            

            	推荐ADVISE
            
            

            	记录RECORD
            
            

            	问答Q&A
            
        
    

// CSS部分

ul,ol {list-style:none;}
img {border:none;}
* {margin:0; padding:0;}
a {text-decoration:none;}
#top {width:1200px; margin:0 auto;}
#logo {float:left; height:72px; margin-right:30px;}
#logo img {width:269px; height:72px;}
.level1 {float:left; height:72px; border:1px solid #ccc; border-top:none; border-bottom:none; margin-left:-1px;}
.parent {position:relative;}
#nav {float:left; font-size:13px; font-family:"Microsoft Yahei"}
.level1 > a {background:#fff; color:#333; display:block; padding:16px 15px 8px 15px; line-height:24px; position:relative; z-index:2;}
.level1 > a:hover,.dropdown > a:hover {background:#17BDC1; color:#fff;}
.level1 > a > span {display:block;}
.dropdown {position:absolute; top:42px; left:-66px; z-index:1; height:30px; line-height:30px; width:200px; display:none;}
.dropdown > a {float:left; padding:0 19px; color:#333; background:#fff; border-left:1px solid #ccc; border-right:1px solid #ccc; margin-left:-1px;}

// javascript 部分

function Dropdown(){
	
	this.init.apply(this, arguments);	//初始化
	
}


Dropdown.prototype={
	
	init : function(container, sLiCls, sParentCls, sDropCls, speed){
		
		this.container=this.$(container);
		
		this.timer=null;
		
		this.iNow=0;
		
		var that=this;
		
		this.aLi=this.getByClass(this.container, sLiCls);
		
		this.aParent=this.getByClass(this.container, sParentCls);
		
		this.aDropdown=this.getByClass(this.container, sDropCls);
		
		for(var i=0;i0?Math.ceil(iSpeed):Math.floor(iSpeed);
			
			if(iCur!=json[attr]){
				
				bStop=false;
			}
			
			obj.style[attr]=iCur+iSpeed+'px';
		}
			
		if(bStop){
			
			clearInterval(obj.timer);
		}
	}, 30)
}