随便写着玩的“高级 无限 联动 提示层效果”演示地址: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;
  })();

解决方案 »

  1.   

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

  2.   

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