模仿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() { } }); }; } });
效果图如下:
转载请注明,谢谢!