随便写着玩的“高级 无限 联动 提示层效果”演示地址:http://www.izhaoyang.com/test4/代码如下:/*
* iWant JavaScript Framework v1.1 => Plugins Tipbox
* http://www.zhanghong.name
*
* 17:21 2011-7-5 By Zhanghong
*/ (function() {
//创建配置对象
var _cfg = {
"mdlhome" : document.documentElement.lastChild.lastChild.src.replace(new RegExp("(.*\\/){0,}([^\\.]+.*)", "gi"), "$1"),
"mdlroot" : null,
"timer" : null
}; //创建盒子对象
var _bin = function(that, model) {
try {
return function(p/* target, index, ibase, delay, offsetLeft, offsetTop, gradual */) {
//创建内置常量
var c = iWant.cfg["plugins_tipbox"]; //创建内置方法
var createMdlly = function() {
var m = that.createElement("DIV", {
style : (
"position:absolute; z-index:100000000; overflow:hidden; width:auto; height:auto; margin:0px; border:none; padding:0px; background:none;" +
"outline:none; opacity:.0; -moz-opacity:.0; filter:alpha(opacity=0);"
),
onclick : function(event) {
that.cancelBubble(event || window.event);
},
ondblclick : function(event) {
that.cancelBubble(event || window.event);
},
onmousedown : function(event) {
that.cancelBubble(event || window.event);
},
onmouseup : function(event) {
that.cancelBubble(event || window.event);
},
onmouseover : function(event) {
window.clearTimeout(c["timer"]);
that.cancelBubble(event || window.event);
},
onmouseout : function(event) {
c["timer"] = setTimeout(removeMdlly, p.delay);
that.cancelBubble(event || window.event);
}
});
if(!p.target.parentNode.tipboxParent) {
c["mdlroot"] = c["mdlroot"] || {};
c["mdlroot"][p.index] = p.target.parentNode;
}
m.tipboxParent = p.target.parentNode;
m.tipboxTarget = p.target;
p.target.parentNode.tipboxChilds = p.target.parentNode.tipboxChilds || {};
p.target.parentNode.tipboxChilds[p.index] = m;
document.body.appendChild(m);
}; var removeMdlly = function() {
(function(m) {
for(var i in m) {
if(m[i].tipboxChilds) {
arguments.callee(m[i].tipboxChilds);
delete m[i].tipboxChilds;
}
if(m[i].tipboxParent) {
document.body.removeChild(m[i]);
}
}
})(arguments[0] || c["mdlroot"] || null);
if(!arguments[0]) {c["mdlroot"] = null}
}; var configMdlly = function() {
var m = p.target.parentNode.tipboxChilds;
var i = (function() {
if(/<.*>/.test(model)) {
return model;
} else {
var f = that.createElement("IFRAME", {src : model.indexOf("@") < 0 ? c["mdlhome"] + model + "/model.htm" : "/" + model.substring(1) + "/model.htm", style : "display:none;"});
that.attachEvent(f, {
load : function() {
i = f.contentWindow.document.body.innerHTML.replace(new RegExp("<!--\\[MODEL\\[([\\s\\S]*?)\\]\\]-->", "gi"), "$1");
m[p.index].removeChild(f);
}
});
m[p.index].appendChild(f);
}
})();
var t_i = setInterval(function() {
if(i) {
window.clearInterval(t_i);
for(var a in p) {
i = i.replace(new RegExp("{=" + a + "}|%7B=" + a + "%7D", "gi"), p[a]);
}
m[p.index].innerHTML = i;
}
}, 100);
var t_c = setInterval(function() {
if(m[p.index].offsetWidth) {
window.clearInterval(t_c);
var _a = that.getElementBySite(p.target).left + p.offsetLeft;
var _b = that.getElementBySite(p.target).top + p.offsetTop;
var _c = _a;
var _d = _b;
for(var i in m) {
if(i != p.index) {
if(p.target == m[i].tipboxTarget) {
document.body.removeChild(m[p.index]);
delete m[p.index];
return;
}
if(m[i].tipboxChilds) {
removeMdlly(m[i].tipboxChilds);
delete m[i].tipboxChilds;
}
var _i = i;
_c = that.getElementBySite(m[i].tipboxTarget).left + p.offsetLeft;
_d = that.getElementBySite(m[i].tipboxTarget).top + p.offsetTop;
}
}
if(p.gradual) {
m[p.index].style.left = _c + "px";
m[p.index].style.top = _d + "px";
that.createAnimate(m[p.index], 10, 10, {
"left" : function(i, j) {
return (_c + (_a - _c) * i * 0.1) + "px";
},
"top" : function(i, j) {
return (_d + (_b - _d) * i * 0.1) + "px";
},
"opacity" : function(i, j) {
return i * 10 / 100;
},
"-moz-opacity" : function(i, j) {
return i * 10 / 100;
},
"filter" : function(i, j) {
return "alpha(opacity=" + i * 10 + ")";
}
});
if(_i) {
that.createAnimate(m[_i], 10, 10, {
"left" : function(i, j) {
return (_c + (_a - _c) * i * 0.1) + "px";
},
"top" : function(i, j) {
return (_d + (_b - _d) * i * 0.1) + "px";
},
"opacity" : function(i, j) {
return (10 - i) * 10 / 100;
},
"-moz-opacity" : function(i, j) {
return (10 - i) * 10 / 100;
},
"filter" : function(i, j) {
return "alpha(opacity=" + (10 - i) * 10 + ")";
}
}, function() {
document.body.removeChild(m[_i]);
delete m[_i];
});
}
} else {
m[p.index].style["left" ] = _a + "px";
m[p.index].style["top" ] = _b + "px";
m[p.index].style["opacity" ] = "1";
m[p.index].style["-moz-opacity"] = "1";
m[p.index].style["filter" ] = "alpha(opacity=100)";
if(_i) {
document.body.removeChild(m[_i]);
delete m[_i];
}
}
}
}, 100);
}; //初始化
p.target = that.$(p.target);
p.delay = p.delay || 500;
that.attachEvent(p.target, {
mouseover : function(event) {
window.clearTimeout(c["timer"]);
that.detachEvent(p.target, {mouseover : arguments.callee});
that.cancelBubble(event || window.event);
},
mouseout : function(event) {
c["timer"] = setTimeout(removeMdlly, p.delay);
window.clearTimeout(t);
that.detachEvent(p.target, {mouseout : arguments.callee});
that.cancelBubble(event || window.event);
}
});
var t = setTimeout(function() {
p.index = p.index || (Math.random() * 1E18).toString(16).toUpperCase();
p.ibase = p.ibase || model.indexOf("@") < 0 ? c["mdlhome"] + model + "/" : "/" + model.substring(1) + "/";
p.offsetLeft = p.offsetLeft || 0;
p.offsetTop = p.offsetTop || 0;
p.gradual = p.gradual !== undefined ? p.gradual : true;
createMdlly();
configMdlly();
}, p.delay);
};
} catch(error) { }
}; //注册组件
iWant.cfg["plugins_tipbox"] = _cfg;
iWant.bin.plugins["tipbox"] = _bin;
iWant.bin.plugins["提示框"] = _bin;
})();
* iWant JavaScript Framework v1.1 => Plugins Tipbox
* http://www.zhanghong.name
*
* 17:21 2011-7-5 By Zhanghong
*/ (function() {
//创建配置对象
var _cfg = {
"mdlhome" : document.documentElement.lastChild.lastChild.src.replace(new RegExp("(.*\\/){0,}([^\\.]+.*)", "gi"), "$1"),
"mdlroot" : null,
"timer" : null
}; //创建盒子对象
var _bin = function(that, model) {
try {
return function(p/* target, index, ibase, delay, offsetLeft, offsetTop, gradual */) {
//创建内置常量
var c = iWant.cfg["plugins_tipbox"]; //创建内置方法
var createMdlly = function() {
var m = that.createElement("DIV", {
style : (
"position:absolute; z-index:100000000; overflow:hidden; width:auto; height:auto; margin:0px; border:none; padding:0px; background:none;" +
"outline:none; opacity:.0; -moz-opacity:.0; filter:alpha(opacity=0);"
),
onclick : function(event) {
that.cancelBubble(event || window.event);
},
ondblclick : function(event) {
that.cancelBubble(event || window.event);
},
onmousedown : function(event) {
that.cancelBubble(event || window.event);
},
onmouseup : function(event) {
that.cancelBubble(event || window.event);
},
onmouseover : function(event) {
window.clearTimeout(c["timer"]);
that.cancelBubble(event || window.event);
},
onmouseout : function(event) {
c["timer"] = setTimeout(removeMdlly, p.delay);
that.cancelBubble(event || window.event);
}
});
if(!p.target.parentNode.tipboxParent) {
c["mdlroot"] = c["mdlroot"] || {};
c["mdlroot"][p.index] = p.target.parentNode;
}
m.tipboxParent = p.target.parentNode;
m.tipboxTarget = p.target;
p.target.parentNode.tipboxChilds = p.target.parentNode.tipboxChilds || {};
p.target.parentNode.tipboxChilds[p.index] = m;
document.body.appendChild(m);
}; var removeMdlly = function() {
(function(m) {
for(var i in m) {
if(m[i].tipboxChilds) {
arguments.callee(m[i].tipboxChilds);
delete m[i].tipboxChilds;
}
if(m[i].tipboxParent) {
document.body.removeChild(m[i]);
}
}
})(arguments[0] || c["mdlroot"] || null);
if(!arguments[0]) {c["mdlroot"] = null}
}; var configMdlly = function() {
var m = p.target.parentNode.tipboxChilds;
var i = (function() {
if(/<.*>/.test(model)) {
return model;
} else {
var f = that.createElement("IFRAME", {src : model.indexOf("@") < 0 ? c["mdlhome"] + model + "/model.htm" : "/" + model.substring(1) + "/model.htm", style : "display:none;"});
that.attachEvent(f, {
load : function() {
i = f.contentWindow.document.body.innerHTML.replace(new RegExp("<!--\\[MODEL\\[([\\s\\S]*?)\\]\\]-->", "gi"), "$1");
m[p.index].removeChild(f);
}
});
m[p.index].appendChild(f);
}
})();
var t_i = setInterval(function() {
if(i) {
window.clearInterval(t_i);
for(var a in p) {
i = i.replace(new RegExp("{=" + a + "}|%7B=" + a + "%7D", "gi"), p[a]);
}
m[p.index].innerHTML = i;
}
}, 100);
var t_c = setInterval(function() {
if(m[p.index].offsetWidth) {
window.clearInterval(t_c);
var _a = that.getElementBySite(p.target).left + p.offsetLeft;
var _b = that.getElementBySite(p.target).top + p.offsetTop;
var _c = _a;
var _d = _b;
for(var i in m) {
if(i != p.index) {
if(p.target == m[i].tipboxTarget) {
document.body.removeChild(m[p.index]);
delete m[p.index];
return;
}
if(m[i].tipboxChilds) {
removeMdlly(m[i].tipboxChilds);
delete m[i].tipboxChilds;
}
var _i = i;
_c = that.getElementBySite(m[i].tipboxTarget).left + p.offsetLeft;
_d = that.getElementBySite(m[i].tipboxTarget).top + p.offsetTop;
}
}
if(p.gradual) {
m[p.index].style.left = _c + "px";
m[p.index].style.top = _d + "px";
that.createAnimate(m[p.index], 10, 10, {
"left" : function(i, j) {
return (_c + (_a - _c) * i * 0.1) + "px";
},
"top" : function(i, j) {
return (_d + (_b - _d) * i * 0.1) + "px";
},
"opacity" : function(i, j) {
return i * 10 / 100;
},
"-moz-opacity" : function(i, j) {
return i * 10 / 100;
},
"filter" : function(i, j) {
return "alpha(opacity=" + i * 10 + ")";
}
});
if(_i) {
that.createAnimate(m[_i], 10, 10, {
"left" : function(i, j) {
return (_c + (_a - _c) * i * 0.1) + "px";
},
"top" : function(i, j) {
return (_d + (_b - _d) * i * 0.1) + "px";
},
"opacity" : function(i, j) {
return (10 - i) * 10 / 100;
},
"-moz-opacity" : function(i, j) {
return (10 - i) * 10 / 100;
},
"filter" : function(i, j) {
return "alpha(opacity=" + (10 - i) * 10 + ")";
}
}, function() {
document.body.removeChild(m[_i]);
delete m[_i];
});
}
} else {
m[p.index].style["left" ] = _a + "px";
m[p.index].style["top" ] = _b + "px";
m[p.index].style["opacity" ] = "1";
m[p.index].style["-moz-opacity"] = "1";
m[p.index].style["filter" ] = "alpha(opacity=100)";
if(_i) {
document.body.removeChild(m[_i]);
delete m[_i];
}
}
}
}, 100);
}; //初始化
p.target = that.$(p.target);
p.delay = p.delay || 500;
that.attachEvent(p.target, {
mouseover : function(event) {
window.clearTimeout(c["timer"]);
that.detachEvent(p.target, {mouseover : arguments.callee});
that.cancelBubble(event || window.event);
},
mouseout : function(event) {
c["timer"] = setTimeout(removeMdlly, p.delay);
window.clearTimeout(t);
that.detachEvent(p.target, {mouseout : arguments.callee});
that.cancelBubble(event || window.event);
}
});
var t = setTimeout(function() {
p.index = p.index || (Math.random() * 1E18).toString(16).toUpperCase();
p.ibase = p.ibase || model.indexOf("@") < 0 ? c["mdlhome"] + model + "/" : "/" + model.substring(1) + "/";
p.offsetLeft = p.offsetLeft || 0;
p.offsetTop = p.offsetTop || 0;
p.gradual = p.gradual !== undefined ? p.gradual : true;
createMdlly();
configMdlly();
}, p.delay);
};
} catch(error) { }
}; //注册组件
iWant.cfg["plugins_tipbox"] = _cfg;
iWant.bin.plugins["tipbox"] = _bin;
iWant.bin.plugins["提示框"] = _bin;
})();
* iWant JavaScript Framework v1.1 => Plugins Tipbox
* http://www.zhanghong.name
*
* 17:21 2011-7-5 By Zhanghong
*/ (function() {
//创建配置对象
var _cfg = {
"mdlhome" : document.documentElement.lastChild.lastChild.src.replace(new RegExp("(.*\\/){0,}([^\\.]+.*)", "gi"), "$1"),
"mdlroot" : null,
"timer" : null
}; //创建内置方法
var _bin = function(that, model) {
try {
return function(p/* target, index, ibase, delay, offsetLeft, offsetTop, gradual */) {
//创建内置常量
var c = iWant.cfg["plugins_tipbox"]; //创建内置方法
var createMdlly = function() {
var m = that.createElement("DIV", {
style : (
"position:absolute; z-index:100000000; overflow:hidden; width:auto; height:auto; margin:0px; border:none; padding:0px; background:none;" +
"outline:none; opacity:.0; -moz-opacity:.0; filter:alpha(opacity=0);"
),
onclick : function(event) {
that.cancelBubble(event || window.event);
},
ondblclick : function(event) {
that.cancelBubble(event || window.event);
},
onmousedown : function(event) {
that.cancelBubble(event || window.event);
},
onmouseup : function(event) {
that.cancelBubble(event || window.event);
},
onmouseover : function(event) {
window.clearTimeout(c["timer"]);
that.cancelBubble(event || window.event);
},
onmouseout : function(event) {
c["timer"] = setTimeout(removeMdlly, p.delay);
that.cancelBubble(event || window.event);
}
});
if(!p.target.parentNode.tipboxParent) {
c["mdlroot"] = c["mdlroot"] || {};
c["mdlroot"][p.index] = p.target.parentNode;
}
m.tipboxParent = p.target.parentNode;
m.tipboxTarget = p.target;
p.target.parentNode.tipboxChilds = p.target.parentNode.tipboxChilds || {};
p.target.parentNode.tipboxChilds[p.index] = m;
document.body.appendChild(m);
}; var removeMdlly = function() {
(function(m) {
for(var i in m) {
if(m[i].tipboxChilds) {
arguments.callee(m[i].tipboxChilds);
}
if(m[i].tipboxParent) {
document.body.removeChild(m[i]);
}
delete m[i];
}
})(arguments[0] || c["mdlroot"]);
}; var configMdlly = function() {
var m = p.target.parentNode.tipboxChilds;
var i = (function() {
if(/<.*>/.test(model)) {
return model;
} else {
var f = that.createElement("IFRAME", {src : model.indexOf("@") < 0 ? c["mdlhome"] + model + "/model.htm" : "/" + model.substring(1) + "/model.htm", style : "display:none;"});
that.attachEvent(f, {
load : function() {
i = f.contentWindow.document.body.innerHTML.replace(new RegExp("<!--\\[MODEL\\[([\\s\\S]*?)\\]\\]-->", "gi"), "$1");
m[p.index].removeChild(f);
}
});
m[p.index].appendChild(f);
}
})();
var t_i = setInterval(function() {
if(i) {
window.clearInterval(t_i);
for(var a in p) {
i = i.replace(new RegExp("{=" + a + "}|%7B=" + a + "%7D", "gi"), p[a]);
}
m[p.index].innerHTML = i;
}
}, 100);
var t_c = setInterval(function() {
if(m[p.index].offsetWidth) {
window.clearInterval(t_c);
var _a = that.getElementBySite(p.target).left + p.offsetLeft;
var _b = that.getElementBySite(p.target).top + p.offsetTop;
var _c = _a;
var _d = _b;
for(var i in m) {
if(i != p.index) {
if(p.target == m[i].tipboxTarget) {
document.body.removeChild(m[p.index]);
delete m[p.index];
return;
}
if(m[i].tipboxChilds) {
removeMdlly(m[i].tipboxChilds);
}
var _i = i;
_c = that.getElementBySite(m[i].tipboxTarget).left + p.offsetLeft;
_d = that.getElementBySite(m[i].tipboxTarget).top + p.offsetTop;
}
}
if(p.gradual) {
m[p.index].style.left = _c + "px";
m[p.index].style.top = _d + "px";
that.createAnimate(m[p.index], 10, 10, {
"left" : function(i, j) {
return (_c + (_a - _c) * i * 0.1) + "px";
},
"top" : function(i, j) {
return (_d + (_b - _d) * i * 0.1) + "px";
},
"opacity" : function(i, j) {
return i * 10 / 100;
},
"-moz-opacity" : function(i, j) {
return i * 10 / 100;
},
"filter" : function(i, j) {
return "alpha(opacity=" + i * 10 + ")";
}
});
if(_i) {
that.createAnimate(m[_i], 10, 10, {
"left" : function(i, j) {
return (_c + (_a - _c) * i * 0.1) + "px";
},
"top" : function(i, j) {
return (_d + (_b - _d) * i * 0.1) + "px";
},
"opacity" : function(i, j) {
return (10 - i) * 10 / 100;
},
"-moz-opacity" : function(i, j) {
return (10 - i) * 10 / 100;
},
"filter" : function(i, j) {
return "alpha(opacity=" + (10 - i) * 10 + ")";
}
}, function() {
document.body.removeChild(m[_i]);
delete m[_i];
});
}
} else {
m[p.index].style["left" ] = _a + "px";
m[p.index].style["top" ] = _b + "px";
m[p.index].style["opacity" ] = "1";
m[p.index].style["-moz-opacity"] = "1";
m[p.index].style["filter" ] = "alpha(opacity=100)";
if(_i) {
document.body.removeChild(m[_i]);
delete m[_i];
}
}
}
}, 100);
}; //初始化
p.target = that.$(p.target);
p.delay = p.delay || 500;
that.attachEvent(p.target, {
mouseover : function(event) {
window.clearTimeout(c["timer"]);
that.detachEvent(p.target, {mouseover : arguments.callee});
that.cancelBubble(event || window.event);
},
mouseout : function(event) {
c["timer"] = setTimeout(removeMdlly, p.delay);
window.clearTimeout(t);
that.detachEvent(p.target, {mouseout : arguments.callee});
that.cancelBubble(event || window.event);
}
});
var t = setTimeout(function() {
p.index = p.index || (Math.random() * 1E18).toString(16).toUpperCase();
p.ibase = p.ibase || model.indexOf("@") < 0 ? c["mdlhome"] + model + "/" : "/" + model.substring(1) + "/";
p.offsetLeft = p.offsetLeft || 0;
p.offsetTop = p.offsetTop || 0;
p.gradual = p.gradual !== undefined ? p.gradual : true;
createMdlly();
configMdlly();
}, p.delay);
};
} catch(error) { }
}; //注册组件
iWant.cfg["plugins_tipbox"] = _cfg;
iWant.bin.plugins["tipbox"] = _bin;
iWant.bin.plugins["提示框"] = _bin;
})();