MSN弹出式窗口popup的JS实现

本文参考 【玉开】的blog。
效果图：

实现这样的效果步骤如下：
1.把下面的代码添加到博客园管理-选项-Configure-页首Html代码

< script language = " javascript " >
var  divTop,divLeft,divWidth,divHeight,docHeight,docWidth,i  =   0 ;
var  eMsg  =   new  Object();
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;//内容高度
        //alert(document.body.scrollTop);
        //return;
/**//*
        alert("top.window.screen.availHeight "+docHeight);
        alert("top.window.screenTop "+top.window.screenTop);        
        alert("document.body.clientHeight "+document.body.clientHeight);        
        alert("document.body.clientWidth "+docWidth);        
        alert("document.documentElement.scrollTop "+document.documentElement.scrollTop);        
*/
        eMsg.obj().style.top = parseInt(document.body.scrollTop,10) + docHeight + 10;//parseInt(document.body.scrollTop,10)被document.documentElement.scrollTop替换
        eMsg.obj().style.left = parseInt(document.body.scrollLeft,10) + docWidth - divWidth;
        eMsg.obj().style.visibility="visible";
        eMsg.timer = window.setInterval(eMsg.move,2);
       
        //hp.skin.onBeforChange = function(){
        //    if(eMsg.obj())eMsg.obj().parentNode.removeChild(eMsg.obj());
        //};
    }
    catch(e){}
} ;
eMsg.onResize  =   function () {
    i+=1;
    //alert(i);
    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);//parseInt(document.body.scrollTop,10)被document.documentElement.scrollTop替换
        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)))//parseInt(document.body.scrollTop,10)被document.documentElement.scrollTop替换
        {
            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 () {
//alert('will close');
    if(eMsg.obj()) eMsg.obj().parentNode.removeChild(eMsg.obj());
    if(eMsg.timer) window.clearInterval(eMsg.timer);
} ;
eMsg.createInstance  =   function (bodyHtml) {
    //if(!titleHtml || !bodyHtml)throw '必须为titleHtml指定值,必须为bodyHtml指定值。';
  try
  {
    if(eMsg.obj())eMsg.obj().parentNode.removeChild(eMsg.obj());
    if(eMsg.timer) window.clearInterval(eMsg.timer);   
    i=0;
    var odiv = document.createElement('DIV');
    odiv.id = eMsg.id;
    odiv.innerHTML = '<div class="eMsgInner">'
    + '<div class="body" oncontextmenu="eMsg.close();return false;" title="右键关闭">'
        + '<div class="content">'
        + bodyHtml    
        + '</div>'
    + '</div>'
    + '</div>';
    document.body.appendChild(odiv);
  }
  catch(e){}
} ;

window.onresize  =  eMsg.onResize;

function  eMsgPopup(bodyHtml)
{
eMsg.createInstance(bodyHtml);
eMsg.onLoad();
}
function  myPopup()
{
eMsgPopup('<div align=left>博主今日推荐：</div>'
    +'<br><div align=left><a href="http://live-bj.5d6d.com" target="_blank">北京混混网</a></div>');
}

//window.onload = myPopup();

</ script >

2.把下面的CSS样式增加到博客园管理-选项-Configure-通过CSS定制页面

DIV#eMsg {} {
    background-image: url(http://www.cnblogs.com/images/cnblogs_com/vagerent/popupBG.gif);
    visibility: hidden; 
    width: 199px; 
    height: 70px; 
    position: absolute; 
    z-index: 99999; 
    left: 0px;
}
DIV#eMsg DIV.eMsgInner
{} {
    background-image: url(http://www.cnblogs.com/images/cnblogs_com/vagerent/popupBG.gif);
    height:70px;
    width:199px;
}

DIV.body {} {
    height:72px;
    clear:both;
    border-right: #728eb8 1px solid; 
    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.content {} {text-align:center;font-size: 12px;}

3.现在就可以出效果了，不过需要修改那段JS代码，把下面这段修改成自己的文字就可以了。（还有css里面的背景图，最好从我的blog下载然后上传到你自己的blog）

function  myPopup()
{
eMsgPopup('<div align=left>博主今日推荐：</div>'
    +'<br><div align=left><a href="http://live-bj.5d6d.com" target="_blank">北京混混网</a></div>');
}

4.具体效果，测试:)  或者点我blog左上角的卡马克的图片试试。

转载于:https://www.cnblogs.com/vagerent/archive/2007/07/02/802975.html