滑动菜单

前端时间写的一个滑动菜单，贴出来留作纪念……

/**
 * 添加事件
 * @param element 被添加的element
 * @param e 事件名
 * @param fn 方法
 */
function addListener(element, e, fn) {
	if (element.addEventListener) {
		element.addEventListener(e, fn, false);
	} else {
		element.attachEvent("on" + e, fn);
	}
}
/**
 * 配合HTML/CSS实现的。
 * 隐藏、显示的小把戏
 * @param id 菜单ul的id
 * @param mid 菜单li的id
 */
function cf(id,mid) {
	var f = {
		i :0,
		fu :null,
		fl :null,
		element : function() {
			var e = window.event;
			var tar;
			if (e.target) {
				tar = e.target;
			} else if (e.srcElement) {
				tar = e.srcElement;
			}
			if (tar.nodeType == 3) {
				tar = tar.parentNode;
			}
			return tar;
		},
		init : function() {
			this.fu = document.getElementById(id);
			this.fl = this.fu.childNodes;
			for (this.i = 0; this.i < this.fl.length; this.i++) {
				addListener(this.fl[this.i], 'mouseover', this.over);
			}
		},
		again : function() {
			for (this.i = 0; this.i < this.fl.length; this.i++) {
				this.fl[this.i].id = null;
				document.getElementById(this.fl[this.i].className).style.display = 'none';
			}
		},
		over : function() {
			if (f.element().tagName == 'li' || f.element().tagName == 'LI') {
				f.again();
				f.element().id = mid;
				document.getElementById(f.element().className).style.display = 'block';
			}
		}
	};
	f.init();
}
cf('myfriends','hover');

 

 虽然努力了，但仍旧没实现完全脱离HTML……

评论

1 楼 M_ShenJing 2010-04-29  

能把html代码部分贴出来不啊