跟着鼠标移动的动态DIV盒子插件

 

$.fn.hoverMessage = function (options) {
        var defaults = {
            "xOffset": 0,
            "yOffset": 0,
            "fun": function () { }
        };
        var options = $.extend(defaults, options);
        this.each(function () {
            var currObj = $(this);
            currObj.hover(
            function (e) {
                $("#viewBox").remove();

                $("body").append("<div id=viewBox>" + options.fun() + "</div>");
                $("#preview").css(
                    {
                        "top": (e.pageY - defaults.xOffset) + "px",
                        "left": (e.pageX + defaults.yOffset) + "px",
                        "background": "#9900CC",
                        "color": "white",
                        "display": "none",
                        "padding": "5px",
                        "position": "absolute"
                    }
                    ).fadeIn("slow");
            },
            function () {
                $("#viewBox").fadeOut("slow");
                //$("#viewBox").remove();
            }

          );
        });

    }

 

// 调用 ：  $(".personList td span").moveMessage({ "fun": function () {
                   return "dd";
                  }
            });