模仿QQ空间好友提示层（DIV）

模仿QQ空间当鼠标移到好友图像时，动态加载该好友的信息。兼容各大浏览器，IE6+、火狐、谷歌、Opera，其他的未测试。

 

PS：这是我写的第一个JQuery 插件，具有里程碑的意义。请大家多多指教，谢谢。o(∩_∩)o

 

代码如下：

 

/*
* 模仿QQ空间当鼠标移到好友图像时，动态加载该好友的信息
*
* Copyright (c) 2010 Bruce Liu Email: freekingman@163.com  QQ: 403350327
*
* 转载请注明，o(∩_∩)o 
*
* Version:  1.0.0
*
*/

function wait(obj, secon)
{
    if (window.eventList == null)
    {
        window.eventList = new Array();
    }
    var con = -1;
    for (var i = 0; i < window.eventList.length; i++)
    {
        if (window.eventList[i] == null)
        {
            window.eventList[i] = obj;
            con = i;
            break;
        }
    }
    if (con == -1)
    {
        con = window.eventList.length;
        window.eventList[con] = obj;
    }
    clearTimeout(this.timer);
    this.timer = setTimeout("exec(" + con + ")", secon);
};
function exec(con)
{
    var obj = window.eventList[con];
    window.eventList[con] = null;
    if (obj.nextFun)
    {
        obj.nextFun();
    }
    else
    {
        obj();
    }
};
jQuery.extend({
    tooltipMockQQ: function(options) {
        jQuery.tooltipMockQQ.defaults = {
            promptDivId: "divUserInfoLayer",
            promptDivClassName: "UserInfo",
            xOffset: 10,
            yOffset: 0,
            enabled: true,
            aClassName: "tooltipMockQQTrigger",
            getUserNameFromAttr: "title",
            hideInMillisecond: 100,
            showInMillisecond: 500
        };
        var opts = jQuery.extend(jQuery.tooltipMockQQ.defaults, options);
        $("a." + opts.aClassName).hover(function(e) {
            $(this).data("needHide", false);
        },
        function() {
            JudgeIfNeedToHide();
        }).mousemove(function(e) {
            var tempFlag = $("#" + opts.promptDivId).data("needMove"); // undefined
            if (tempFlag != false) {
                if (document.getElementById(opts.promptDivId) == null) {
                    $("body").append("<div id='" + opts.promptDivId + "' class='" + opts.promptDivClassName + "'></div>");
                }
                ClearStyle();
                var userName = $(this).attr(opts.getUserNameFromAttr);
                GetHtmlUserInfo(userName);
                var e_pageY = e.pageY;
                var e_pageX = e.pageX;
                wait(this, opts.showInMillisecond);
                this.nextFun = function() {
                    var tempY = GetTempY(e_pageY, opts.yOffset);
                    var tempX = GetTempX(e_pageX, opts.xOffset);
                    $("#" + opts.promptDivId).hover(function(e) {
                        $(this).data("needHide", false);
                    }, function() {
                        $(this).data("needHide", true);
                        JudgeIfNeedToHide();
                    }).css("top", tempY + "px").css("left", tempX + "px").data("needMove", false);
                }
            }
        });
        function JudgeIfNeedToHide() {
            wait(this, opts.hideInMillisecond);
            this.nextFun = function() {
                if ($("#" + opts.promptDivId).data("needHide") != false) {
                    ClearStyle();
                    $("#" + opts.promptDivId).data("needMove", true).html("").hide();
                }
            }
        };
        function getViewportHeight() {
            if (window.innerHeight != window.undefined) return window.innerHeight;
            if (document.compatMode == 'CSS1Compat') return document.documentElement.clientHeight;
            if (document.body) return document.body.clientHeight;
            return window.undefined;
        };
        function getViewportWidth() {
            if (window.innerWidth != window.undefined) return window.innerWidth;
            if (document.compatMode == 'CSS1Compat') return document.documentElement.clientWidth;
            if (document.body) return document.body.clientWidth;
            return window.undefined;
        };
        function GetTempY(e_pageY, yOffset) {
            var tempY = e_pageY - yOffset;
            var pHeight = $("#" + opts.promptDivId).outerHeight(false);
            var documentClientHeight = getViewportHeight();
            var sTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
            if ((tempY + pHeight) > (documentClientHeight + sTop)) {
                tempY = tempY - pHeight;
                if (tempY < 0) {
                    tempY = 0;
                }
            }
            return tempY;
        };
        function GetTempX(e_pageX, xOffset) {
            var tempX = e_pageX + xOffset;
            var pWidth = $("#" + opts.promptDivId).outerWidth(false);
            var documentClientWidth = getViewportWidth();
            if ((tempX + pWidth) > documentClientWidth) {
                tempX = e_pageX - pWidth - xOffset;
                if (tempX < 0) {
                    tempX = 0;
                }
            }
            return tempX;
        };
        function ClearStyle() {
            $("#" + opts.promptDivId).css("top", "-1000px").css("left", "-1000px");
        };
        function GetHtmlUserInfo(userName) {
            $.ajax({
                type: "POST",
                cache: false,
                async: true,
                url: "/Default/GetHtmlUserInfoDiv?randomNumber=" + Math.random(),
                data: { "userName": userName },
                dataType: "html",
                beforeSend: function() {
                    $("#" + opts.promptDivId).html("<p class=\"loadingImg\">正在加载，请稍后...</p>").show();
                },
                success: function(data) {
                    $("#" + opts.promptDivId).html(data).show();
                },
                error: function() {
                    $("#" + opts.promptDivId).html("<p>加载失败，请重试...</p>").show();
                },
                complete: function() {

                }
            });
        };
    }
});

 

效果图如下：

 

转载请注明，谢谢！