滑动菜单
程序员文章站
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……