随便写着玩的“高级 无限 联动 提示层效果”

[zh19881213]

随便写着玩的“高级 无限 联动 提示层效果”

演示地址：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;
  })();

[lsw645645645]

[豆虫]

LZ是强人啊~~~~~

[zengtan1021]

参考楼主前一个帖子, 现在互联网泡沫真大.

[mr_zhu]

- -妹的 好强大喔

[zh19881213]

[燥动的心]

FF打开没有一点动静?

[zh19881213]

ff测试没问题，ie6下有点问题，一会在改

[zh19881213]

[zh19881213]

IE6下已正常，并且对360，TT也进行了测试，没有问题了。

代码重发：

/*
 * 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;
  })();

[confidenceyu]

赞一个

[MyCsdn_heng]

演示地址瞎的也太快了吧？？？先在看不到了呢、。

[zh19881213]

过几天在放，我整理下

[zh19881213]

这几天在看xml