您的位置：首页 > Web前端 > JQuery

jQuery插件之模仿QQ邮箱的聊天功能的弹出弹出效果

2009-11-07 14:27 507 查看
$.fn.extend({
    SetBigInSmallOut: function(ContextDiv, T, W, H, closeControlID) {
        return this.each(function(i) {
            $(this).bind("click", function(event) {
                var btnOffset = $(event.target).offset();
                if ($("#" + ContextDiv).css("display") == "none") {
                    $("#" + ContextDiv).css({ 'top': btnOffset.top, 'left': btnOffset.left, 'width': '0', 'height': '0' }).animate(
                                {
                                    height: H,
                                    width: W,
                                    left: (document.documentElement.clientWidth - W) / 2,
                                    top: T
                                }, "slow", function() {
                                    this.style.display = "";
                                    $(this).attr({ "hideTop": btnOffset.top, "hideLeft": btnOffset.left });
 
                                    $("#" + closeControlID).css({ "cursor": "pointer" }).unbind();
                                    $("#" + closeControlID).click(function(event) {
                                        //alert($("#div_").attr("hideLeft"));
                                        $("#" + ContextDiv).animate(
                                    {
                                        height: 0,
                                        width: 0,
                                        left: $("#" + ContextDiv).attr("hideLeft"),
                                        top: $("#" + ContextDiv).attr("hideTop")
                                    }, "slow", function() {
                                        this.style.display = "none";
                                    });
                                    });
                                }
                        );
 
                }
            });
        });
    }
});
 
//$("input").SetBigInSmallOut("div_", 300, 300, 200, "close"); 主div，距离顶部多少px，主div高度，主div宽度，关闭主div的按钮id
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航