页面弹窗(仿QQ,MSN迷你首页)效果

好久没写博客了 今天更新一下。
公司最近要在论坛添加一个弹出窗口推荐最新的新闻内容，找了很久总算找到个新浪的效果比较满意遂改动一下发上来和大家分享。
先做个简介吧：
当页面第一次载入的情况下弹出一个大的窗口显示最新的推荐文章,类似QQ,MSN的迷你首页,并在Cookies中写入一下作为下次访问时判断是否第一次访问的条件;

当第二次访问的时候首先判断Cookies是否存在,存在的话就在页面右下角显示小的窗口;

Cookies的判断过程在 aspx文件中,利用Ajax进行传值操作这样方便对窗口内容的控制.

支持IE6+,Firefox

下面是 js主文件:

 

document.write("<div id='miniMessage' style='width:0px;height:0px;position:absolute;border:1px solid #60B0FF;display:none;overflow:hidden;background:#FFF;z-index:20'>\n<div id='miniBack' style='position:absolute;top:0px;left:0px;width:100%;height:100%;background:#FFF;-moz-opacity:0;filter:Alpha(Opacity = 0);display:none;'>&nbsp;</div>\n<div id='miniDrag' style='position:absolute;top:0px;left:0px;width:100%;height:25px;display:none;cursor:move;' onselectstart='return false'>&nbsp;</div>\n<div style='position:absolute;top:5px;right:10px;'><img src='/PopupWin/msg_bbs_sina_com_cn.gif' width='65' height='16' alt='' /> <img id='miniImage' src='/PopupWin/msg_min.gif' width='16' height='16'  style='cursor:pointer;' alt='' /> <img src='/PopupWin/msg_close.gif' width='16' height='16' style='cursor:pointer;' onclick='miniMessage.close();' /></div>\n<div id='innerObj' style='width:100%;height:100%'></div>\n</div>");
var _domain = "localhost"; //定义Cookies使用的作用域(使用的时候换成相应的域名)
document.domain = _domain;
function Cookie() {
    this.setcookie = function(n, v, e, p) {
        var cookiestr = n + "=" + escape(v) + "; ";
        if (!isNull(e) && !isNaN(e)) {
            var d = new Date();
            d.setTime(d.getTime() + e * 1000);
            cookiestr += "expires=" + d.toGMTString() + "; ";
        };
        cookiestr += "domain=" + _domain + "; ";
        if (!isNull(p)) {
            cookiestr += "path=" + p + "; ";
        }
        else {
            cookiestr += "path=/; ";
        };
        document.cookie = cookiestr;
    };
    this.getcookie = function(n) {
        var aCookie = document.cookie.split("; ");
        for (var i = 0; i < aCookie.length; i++) {
            var aCrumb = aCookie[i].split("=");
            if (n == aCrumb[0]) {
                return unescape(aCrumb[1]);
            };
        };
        return null;
    };
    this.delcookie = function(n) {
        document.cookie = n + "=" + null + "; omain=" + _domain + "; path=/; expires=Fri, 31 Dec 1999 23:59:59 GMT;";
    };
};
function isNull(_sVal) {
    return (_sVal === "" || _sVal == null || _sVal == "undefined");
};

function $(s) {
    if (document.getElementById) {
        return document.getElementById(s);
    }
    else {
        return document.all[s];
    };
};
function $t(s, o) {
    if (o == null) {
        return document.getElementsByTagName(s);
    }
    else {
        return o.getElementsByTagName(s);
    };
};
function _ajax() {
    var req = null;
    var method = "get";
    var sync = true;
    var query = Array();
    var argu = [];
    var parser = null;
    var res = { responseXML: null, responseText: null };
    this.init = function() {
        if (window.ActiveXObject) {
            try {
                req = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e) {
                req = new ActiveXObject("Msxml2.XMLHTTP");
            }
            return true;
        }
        else if (window.XMLHttpRequest) {
            parser = new DOMParser();
            req = new XMLHttpRequest();
            return true;
        }
        else {
            return false;
        };
    };
    this.setVal = function(n, v) {
        if (typeof (n) == "object") {
            query = query.concat(n);
        }
        else {
            query.push(n + "=" + v);
        };
    };
    this.setPost = function() {
        method = "post";
    };
    this.setSync = function() {
        sync = false;
    };
    this.setArgu = function(a) {
        argu = a
        if (isNull(a))
            argu = [];
    };
    this.open = function(_url, func) {
        req.open(method, _url, sync);
        req.onreadystatechange = function() {
            if (req.readyState == 4 && req.status == 200) {
                res.responseText = req.responseText;
                res.responseXML = req.responseXML;
                if (!isNull(parser)) {
                    res.responseXML = parser.parseFromString(req.responseText, "text/xml");
                };
                eval(func).apply(res, argu);
            };
        };
        req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    };
    this.send = function() {
        if (query.length) {
            req.send(query.join("&"));
        }
        else {
            req.send(null);
        };
    };
};
function ajax(_url, func, argu, sync) {
    var req = new _ajax();
    req.init();
    if (!isNull(sync) && isNull == false) {
        req.setSync();
    };
    req.setArgu(argu);
    req.open(_url, func);
    req.send(null);
};
var drag = function(evt) {
    var move_obj = $("miniMessage");
    if (!evt) {
        evt = window.event;
    };
    clearTimeout(window.__MINIMESSAGE);
    var mLeft = evt.clientX - parseInt(move_obj.style.left);
    var mTop = evt.clientY - parseInt(move_obj.style.top);
    document.onmousemove = function() {
        clearTimeout(window.__MINIMESSAGE);
        $("miniBack").style.display = "";
        evt = window.event || arguments[0];
        var _m_l = evt.clientX - mLeft;
        var _m_t = evt.clientY - mTop;
        var _m_l_max = miniMessage.dom.clientWidth + miniMessage.dom.scrollLeft - miniMessage.minibWidth - 2; //边框1+1=2PX
        var _m_t_max = miniMessage.dom.clientHeight + miniMessage.dom.scrollTop - miniMessage.minibHeight - 2;
        if (_m_l <= miniMessage.dom.scrollLeft) {
            _m_l = miniMessage.dom.scrollLeft;
        }
        else if (_m_l >= _m_l_max) {
            _m_l = _m_l_max;
        };
        if (_m_t <= miniMessage.dom.scrollTop) {
            _m_t = miniMessage.dom.scrollTop;
        }
        else if (_m_t >= _m_t_max) {
            _m_t = _m_t_max;
        };
        move_obj.style.left = _m_l + "px";
        move_obj.style.top = _m_t + "px";
    };
    document.onmouseup = function() {
        document.onmousemove = null;
        $("miniBack").style.display = "none";
        miniMessage.miniTop = parseInt(move_obj.style.top) - miniMessage.dom.scrollTop;
        clearTimeout(window.__MINIMESSAGE);
        miniMessage.onscrolling();
    };
};
var miniMessage = {
    "minisWidth": 280,  //小窗口宽高
    "minisHeight": 195,
    "minibWidth": 549,  //大窗口宽高
    "minibHeight": 359,
    "miniTop": 0,   //大窗口TOP边距
    "miniObj": $("miniMessage"),
    "miniDrag": $("miniDrag"),
    "innerObj": $("innerObj"),
    "miniClose": function() { },
    "miniType": null,
    "miniFile": null,
    "dom": document.documentElement ? document.documentElement : document.body,
    "showMiniMessage": function(mFile, mType, closeButtonRun) {
        clearTimeout(window.__MINIMESSAGE);
        this.miniObj.style.display = "";
        if (typeof (closeButtonRun) == "function") {
            this.miniClose = closeButtonRun;
        };
        if (!isNull(mFile)) {
            this.miniFile = mFile;
        };
        if (!isNull(mType)) {
            this.miniType = mType;
        };
        if (this.miniType == "big") {
            this.__big_message();
            var _top = this.dom.clientHeight / 2 - this.miniObj.offsetHeight / 2 + this.dom.scrollTop;
            var _left = this.dom.clientWidth / 2 - this.miniObj.offsetWidth / 2 + this.dom.scrollLeft;
            if (_top < 0) {
                _top = 0;
            };
            if (_left < 0) {
                _left = 0;
            };
            this.miniObj.style.top = _top + "px";
            this.miniObj.style.left = _left + "px";
            this.miniTop = parseInt(this.miniObj.style.top) - this.dom.scrollTop;
            this.miniDrag.style.display = "";
            this.miniDrag.onmousedown = function() {
                drag(arguments[0]);
            };
        }
        else {
            this.miniType = "small";
            this.__small_message();
            this.miniObj.style.left = this.dom.clientWidth - this.miniObj.offsetWidth + this.dom.scrollLeft + "px";
        };
        if (!isNull(mFile)) {
            this.innerObj.innerHTML = "<iframe width='100%' height='100%' scrolling='no' frameborder='0' src='" + mFile + "'></iframe>";
        };
        $("miniImage").src = "/PopupWin/msg_min.gif";
        $("miniImage").onclick = function() {
            miniMessage.minimize();
        };
        this.onscrolling();
    },
    "__big_message": function() {
        this.miniObj.style.width = this.minibWidth + "px";
        this.miniObj.style.height = this.minibHeight + "px";
    },
    "__small_message": function() {
        this.miniObj.style.width = this.minisWidth + "px";
        var i = 2;
        window.__MINISHOW = setInterval(function() {
            var _mini_h = 26 * i;
            if (_mini_h >= 195) {
                miniMessage.miniObj.style.height = "195px";
                clearInterval(window.__MINISHOW);
                return;
            };
            miniMessage.miniObj.style.height = _mini_h + "px";
            i++;
        }, 100);
    },
    "onscrolling": function() {
        if (isNull(this.miniType) || this.miniType == "small" || arguments[0] == "minimize") {
            this.miniObj.style.top = this.dom.clientHeight - this.miniObj.offsetHeight + this.dom.scrollTop + "px";
            this.miniObj.style.left = this.dom.clientWidth - this.miniObj.offsetWidth + this.dom.scrollLeft + "px";
        }
        else if (this.miniType == "big") {
            this.miniObj.style.top = this.miniTop + this.dom.scrollTop + "px";
        };
        window.__MINIMESSAGE = setTimeout("miniMessage.onscrolling('" + arguments[0] + "')", 10);
    },
    "close": function() {
        clearTimeout(window.__MINIMESSAGE);
        this.miniClose();
        this.reset();
    },
    "reset": function() {
        this.miniFile = null;
        this.miniType = null;
        this.miniDrag.style.cursor = 'default';
        this.miniDrag.onmousedown = null;
        this.innerObj.innerHTML = "";
        this.miniObj.style.display = "none";
    },
    "minimize": function() {
        clearTimeout(window.__MINIMESSAGE);
        if (this.miniType == "big") {
            this.miniDrag.style.display = "none";
            this.__mize_big_message();
            this.__mize_mouse();
        }
        else {
            this.__mize_small_message();
        };
        this.onscrolling("minimize");

    },
    "__mize_mouse": function() {
        $("miniImage").src = "/PopupWin/msg_max.gif";
        $("miniImage").onclick = function() {
            clearTimeout(window.__MINIMESSAGE);
            miniMessage.showMiniMessage();
        };
    },
    "__mize_big_message": function() {
        with (this.miniObj.style) {
            width = this.minisWidth + "px";
            height = "26px";
            top = this.dom.clientHeight - this.miniObj.offsetHeight + this.dom.scrollTop + "px";
            left = this.dom.clientWidth - this.miniObj.offsetWidth + this.dom.scrollLeft + "px";
        };
    },
    "__mize_small_message": function() {
        var i = 1;
        window.__MINISHOW = setInterval(function() {
            var _mini_h = 195 - 26 * i;
            if (_mini_h <= 26) {
                miniMessage.miniObj.style.height = "26px";
                miniMessage.__mize_mouse();
                clearInterval(window.__MINISHOW);
                return;
            };
            miniMessage.miniObj.style.height = _mini_h + "px";
            i++;
        }, 100);
    }
};
//调用方法(/ajax/MiniMessage.aspx 该文件传递弹出窗口的大小和内容链接页面地址)
function check_minimessage() {
    ajax("/ajax/MiniMessage.aspx?" + Math.random(), function() {
    var dom = $t("root", this.responseXML)[0];
        for (var i = 0; i < dom.childNodes.length; i++) {
            if (dom.childNodes[i].nodeType == 1 && dom.childNodes[i].tagName) {
                eval("var " + dom.childNodes[i].tagName + " = '" + dom.childNodes[i].firstChild.nodeValue + "'");
            };
        };
        if (result == "true") {
            new Cookie().setcookie("minimessage_" + msgid, true);
            miniMessage.showMiniMessage(msgurl, msgtype, function() {
                var d = new Date();
                var s = d.toLocaleTimeString().split(":");
                new Cookie().setcookie("minimessage_" + msgid, true, 24 * 60 * 60 - s[0] * 60 * 60 - s[1] * 60 - s[2], "/");
            });
        };
    });
};

 

 

再把aspx文件贴一下吧:(直接输出一下就可以啦)

 

private void ResponseXml()
    {
        string result = "true";
        int msgid = 2210;
        string msgtype = "big";
        string msgurl = "/PopupWin/big.html";
        string xml = "<?xml version=\"1.0\" encoding=\"gb2312\" ?>\n<root>\n  <result>{0}</result>\n  <msgid>{1}</msgid>\n  <msgtype>{2}</msgtype>\n  <msgurl>{3}</msgurl>\n</root>";
        if (Request.Cookies["minimessage_" + msgid.ToString()] != null && Request.Cookies["minimessage_" + msgid.ToString()].Value == "true")
        {
            msgtype = "small";
            msgurl = "/PopupWin/small.html";
        }
        
        xml = string.Format(xml, result, msgid.ToString(), msgtype, msgurl);
        Response.ContentType = "text/xml";
        Response.Write(xml);
        Response.End();
    }