欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

滑动菜单

程序员文章站 2022-07-14 16:57:38
...

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

/**
 * 添加事件
 * @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……

相关标签: F# CSS HTML