MSN弹出式窗口popup的JS实现【转:http://www.cnblogs.com/vagerent/archive/2007/07/02/802975.html】

效果图:

实现这样的效果步骤如下:
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://images.cnblogs.com/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://images.cnblogs.com/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左上角的卡马克的图片试试。
posted on 2008-08-13 13:08  草原和大树  阅读(510)  评论(0编辑  收藏  举报