这段代码展示了如何使用JavaScript创建一个简单的Popup菜单效果。通过CSS定义样式，当鼠标悬停在列表项上时，一个相对定位的弹出框会显示出来。Popup类实现了事件监听，当鼠标进入和离开列表项时，控制弹出框的显示和隐藏。最后，通过new Popup()实例化并传入相应参数来应用效果。
*{padding:0;margin:0;border:none;}
ul,li{list-style-type:none;}
.aside{font-size:12px;width:228px;margin:20px;position:relative;border:1px solid #AACCEE;background-color:#F3FAFF;padding-top:10px;padding-bottom:10px;}
.aside .con-popup{position:absolute;left:235px;top: 0;border:1px solid #AACCEE;width:500px;z-index:1}
.aside dd{height:25px;line-height:25px;width:228px;}
.aside dd .con{border-top:1px solid #F3FAFF;border-bottom:1px solid #F3FAFF;}
.aside dd .con-popup{display:none;height:200px;}
.aside dd.hover .con{background-color:#fff;border-top:1px solid #AACCEE;border-bottom:1px solid #AACCEE;width:236px;position:absolute;z-index:9}
.aside dd.hover .con-popup{display:block;}
-
生活服务
/*
* class Popup hover菜单效果
* @param {ELEMENT} 可传入元素、ID
* @return {Popup INSTANCE}
* @author: zzf
*/
function Popup() {
if (!this instanceof arguments.callee) {
return new arguments.callee();
}
this.init.apply(this, arguments);
}
Popup.prototype=function (){
var E = function() {
function elContains(a, b) {
try {
return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(b) & 16);
} catch(e) {}
}
function addEvt(el, type, fn) {
function fun(e) {
var a = e.currentTarget,b = e.relatedTarget;
if (!elContains(a, b) && a != b) {
fn.call(e.currentTarget, e);
}
}
if (el.addEventListener) {
if (type == 'mouseenter') {
el.addEventListener('mouseover', fun, false);
} else if (type == 'mouseleave') {
el.addEventListener('mouseout', fun, false);
} else {
el.addEventListener(type, fn, false);
}
} else {
el.attachEvent('on' + type, function (){
fn.call(el);
});
}
}
return {
addEvt: addEvt
};
} ();
return {
constructor: Popup,
init:function (wrap,tag,cn,timeout){
var wrap=document.getElementById(wrap),
tag=wrap.getElementsByTagName(tag),
len=tag.length,
i=0,
timeout=timeout || 500,
timer=null;
for(; i
E.addEvt(tag[i], 'mouseenter',function() {
var self=this;
timer && clearTimeout(timer);
timer=setTimeout(function (){
self.className=cn;
},timeout)
});
E.addEvt(tag[i], 'mouseleave',function() {
this.className='';
});
}
}
}
}();
//调用
new Popup('aside','dd','hover');
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
