Msn的提示窗口非常经典，所以我们也做一个javascript实现一下，给大家逗乐用。
闲话不多说，Javascript代码如下：
只有javascript代码还是不够的，我们还需要css来定义样式：
DIV#eMsg{}{
background-color: #c9d3f3;
border-left: #a6b4cf 1px solid;
border-right: #455690 1px solid;
border-top: #a6b4cf 1px solid;
border-bottom: #455690 1px solid;
visibility: hidden;
width: 199px;
height: 97px;
position: absolute;
z-index: 99999;
left: 0px;
}
DIV#eMsg DIV.eMsgInner
{}{
border-top: #ffffff 1px solid;
border-left: #ffffff 1px solid;
background-color:#cfdef4;
height:96px;
width:198px;
}
DIV#eMsgInner DIV.head{}{width:197px}
DIV.headLeft{}{width:30px;float:left;}
DIV.headMiddle{}{
width:150px;
text-align:center;
float:left;
padding-top:2px;
color:green;
font-weight:bold
}
DIV.headRight{}{width:16;float:left;}
DIV.headRight IMG{}{
width:13px;
height:13px;
border:0px;
cursor:hand;
margin:2px;
}
DIV.body{}{
height:82px;
clear:both;
border-right: #b9c9ef 1px solid;
padding: 13px;
padding-top: 1px;
border-top: #728eb8 1px solid;
border-left: #728eb8 1px solid;
color: #1f336b;
word-break: break-all;
border-bottom: #b9c9ef 1px solid;
}
DIV.light{}{text-align:center;padding:5px 20px}
DIV.content{}{text-align:center;height:65px;padding-top:10px}
以上是所有的实现代码，我们在使用时还需要做以下两步
1．我们需要在body标签的前面加上加载message的语句
document.write('<sc' + 'ript>' + 'eMsg.createInstance("月牙儿工作室提示","<div align=left>新增加了邮箱登录和地图查询两个模块欢迎您添加使用。</div>");');
document.write('</s')
document.write('cript>');
2．还需要在body的onload事件中添加eMsg.onLoad();
这样就大功告成了，大家可以从我的博客中看到效果的。
有兴趣的朋友可以把它封装成.net控件呀。
/**//*eMsg*/
var divTop,divLeft,divWidth,divHeight,docHeight,docWidth,i = 0;
var eMsg = new Object();
eMsg.lightSrc = '../image/message/light.gif';
eMsg.closeSrc = '../image/message/msgclose.gif';
eMsg.id = 'eMsg';
eMsg.obj = function(){return document.getElementById(eMsg.id);};
eMsg.onLoad = function(){
try{
divTop = parseInt(eMsg.obj().style.top,10);
divLeft = parseInt(eMsg.obj().style.left,10);
divHeight = parseInt(eMsg.obj().offsetHeight,10);
divWidth = parseInt(eMsg.obj().offsetWidth,10);
docWidth = document.body.clientWidth;
docHeight = document.body.clientHeight;
eMsg.obj().style.top = parseInt(document.body.scrollTop,10) + docHeight + 10;
eMsg.obj().style.left = parseInt(document.body.scrollLeft,10) + docWidth - divWidth;
eMsg.obj().style.visibility="visible";
eMsg.timer = window.setInterval(eMsg.move,1);
hp.skin.onBeforChange = function(){
if(eMsg.obj())eMsg.obj().parentNode.removeChild(eMsg.obj());
};
}
catch(e){}
};
eMsg.onResize = function(){
i+=1;
if(i>1000) eMsg.close();
try{
divHeight = parseInt(eMsg.obj().offsetHeight,10);
divWidth = parseInt(eMsg.obj().offsetWidth,10);
docWidth = document.body.clientWidth;
docHeight = document.body.clientHeight;
eMsg.obj().style.top = docHeight - divHeight + parseInt(document.body.scrollTop,10);
eMsg.obj().style.left = docWidth - divWidth + parseInt(document.body.scrollLeft,10);
}
catch(e){}
};
eMsg.move = function(){
try
{
if(parseInt(eMsg.obj().style.top,10) <= (docHeight - divHeight + parseInt(document.body.scrollTop,10)))
{
window.clearInterval(eMsg.timer);
eMsg.timer = window.setInterval(eMsg.onResize,1);
}
divTop = parseInt(eMsg.obj().style.top,10);
eMsg.obj().style.top = divTop - 1;
}
catch(e){}
};
eMsg.close = function(){
eMsg.obj().parentNode.removeChild(eMsg.obj());
if(eMsg.timer) window.clearInterval(eMsg.timer);
};
eMsg.createInstance = function(titleHtml,bodyHtml){
if(!titleHtml || !bodyHtml)throw '必须为titleHtml指定值,必须为bodyHtml指定值。';
var odiv = document.createElement('DIV');
odiv.id = eMsg.id;
odiv.innerHTML = '<div class="eMsgInner">'
+ '<div class="head">'
+ '<div class="headLeft"><img src="http://www.pushad.com/Info/space.gif" height="1" width="1"/></div>'
+ '<div class="headMiddle">' + titleHtml + '</div>'
+ '<div class="headRight"><img src="' + eMsg.closeSrc + '" onclick="eMsg.close()" align="absmiddle"/></div>'
+ '</div>'
+ '<div class="body" oncontextmenu="eMsg.close();return false;" title="右键关闭">'
+ '<div class="light"><IMG src="' + eMsg.lightSrc + '"></div>'
+ '<div class="content">'
+ bodyHtml
+ '</div>'
+ '</div>'
+ '</div>';
document.body.appendChild(odiv);
};
window.onresize = eMsg.onResize;
发表于 @ 2008年07月03日 15:19:30|评论(loading...)|收藏