页面弹窗(仿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;'> </div>\n<div id='miniDrag' style='position:absolute;top:0px;left:0px;width:100%;height:25px;display:none;cursor:move;' onselectstart='return false'> </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();
}

浙公网安备 33010602011771号