??急急~~关于弹出图层

Question

是个图层，通过onmouseover事件调用

Answer 1

var $ = function (id) {
    return "string" == typeof id ? document.getElementById(id) : id;
};function Event(e){
var oEvent = document.all ? window.event : e;
if (document.all) {
if(oEvent.type == "mouseout") {
oEvent.relatedTarget = oEvent.toElement;
}else if(oEvent.type == "mouseover") {
oEvent.relatedTarget = oEvent.fromElement;
}
}
return oEvent;
}function addEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
};function Each(list, fun){
for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }
};
var Class = {
  create: function() {
    return function() {
      this.initialize.apply(this, arguments);
    }
  }
}Object.extend = function(destination, source) {
    for (var property in source) {
        destination[property] = source[property];
    }
    return destination;
}
var AlertBox = Class.create();
AlertBox.prototype = {
  //
  initialize: function(box, options) { var oThis = this;

this._touch = null;
this.Box = $(box);

this._timerShow = null;
this._timerHide = null;

this.SetOptions(options);

this.Delay = parseInt(this.options.Delay) || 0;
this.onShow = this.options.onShow;

this.Box.style.position = "absolute";
this.Box.style.visibility = "hidden";

addEventHandler(this.Box, "mouseover", function(){ oThis.Show(oThis._touch); })
addEventHandler(this.Box, "mouseout", function(e){ oThis.preHide(e); })
  },
  //设置默认属性
  SetOptions: function(options) {
this.options = {//默认值
Delay: 300,//延时
onShow: function(){}//显示时执行
};
Object.extend(this.options, options || {});
  },
  //准备显示
  preShow: function(touch) {
clearTimeout(this._timerHide); clearTimeout(this._timerShow);
var oThis = this; this._timerShow = setTimeout(function(){ oThis.Show(touch); }, this.Delay);
  },
  //显示
  Show: function(touch) {
clearTimeout(this._timerHide); clearTimeout(this._timerShow);
this.onShow();
touch._onshow();

var o = touch, iLeft = o.offsetLeft, iTop = o.offsetTop;

this._touch = o;

iTop += o.offsetHeight;
iLeft -= this.Box.offsetWidth/2 - o.offsetWidth/2;

while (o.offsetParent) { o = o.offsetParent; iLeft += o.offsetLeft; iTop += o.offsetTop; }
this.Box.style.left = iLeft + "px";
this.Box.style.top = iTop + "px";
this.Box.style.visibility = "visible";
  },
  //准备隐藏
  preHide: function(e) {
var oT = Event(e).relatedTarget;
if(!(this.Box.contains ? this.Box.contains(oT) || this.Box == oT : this.Box.compareDocumentPosition(oT) & 16)){
clearTimeout(this._timerHide); clearTimeout(this._timerShow);
var oThis = this; this._timerHide = setTimeout(function(){ oThis.Hide(); }, this.Delay);
}
  },
  //隐藏
  Hide: function(e) {
clearTimeout(this._timerHide); clearTimeout(this._timerShow);
this.Box.style.visibility = "hidden";
//显示select
Each(document.getElementsByTagName("select"), function(o){ o.style.visibility = "visible"; });
  },
  //添加触发对象
  Add: function(touch, onshow) {
var o = $(touch), oThis = this;
o._onshow = onshow || function(){};
addEventHandler(o, "mouseover", function(){ oThis.preShow(o); })
addEventHandler(o, "click", function(){ oThis.Show(o); })
addEventHandler(o, "mouseout", function(e){ oThis.preHide(e); })
  }
};
var ab = new AlertBox("idBox");
ab.Add(o, function(){
o.innerHTML = "ref";
})

Answer 2

谢谢高手，，不过怎么用啊。是不是下面的javascript要写在另一个javascript函数中的啊，而且我要把要显示的数据传递过的。。我对javascript不是很了解，希望能再指点一下。。

Answer 3

一个div
改div可以设置背景图片，背景颜色，等效果

Answer 4

3楼的大哥说 的方法怎么用啊，怎么两个javascript code?写一个函数还是怎么着啊？