zoukankan      html  css  js  c++  java

  • 效仿MSN右下角的滑动窗口

    <HTML><HEAD><TITLE>MSN Advertisement</TITLE>
    <META http-equiv=Content-Type content="text/html; charset=gb2312">
    <style type="text/css">
    <!--
    #eMeng
    {
        BORDER-TOP    : #a6b4cf 1px solid; 
        BORDER-RIGHT    : #455690 1px solid; 
        BORDER-BOTTOM    : #455690 1px solid; 
        BORDER-LEFT    : #a6b4cf 1px solid; 
        TOP    : 622px; 
        LEFT    : 65px; 
        WIDTH    : 226px; 
        HEIGHT    : 102px;
        Z-INDEX    : 99999; 
        <!-- remove two line below, can modify the div on design mode. -->
        VISIBILITY    : hidden; 
        POSITION    : absolute; 
    }

    #title
    {
        BACKGROUND-IMAGE    : none; 
        PADDING-LEFT    : 4px; 
        PADDING-TOP    : 4px;
        FONT-WEIGHT    : normal; 
        FONT-SIZE    : 12px; 
        COLOR    : #1f336b; 
    }

    #board
    {
        BORDER-TOP    : #728eb8 1px solid; 
        BORDER-RIGHT    : #b9c9ef 1px solid; 
        BORDER-BOTTOM    : #b9c9ef 1px solid; 
        BORDER-LEFT    : #728eb8 1px solid; 
        PADDING-TOP    : 18px; 
        PADDING-RIGHT    : 13px; 
        PADDING-BOTTOM    : 13px; 
        PADDING-LEFT    : 13px; 
        FONT-SIZE    : 12px; 
        COLOR    : #1f336b; 
        WIDTH    : 100%; 
        HEIGHT    : 100%;
    }
    -->
    </style>
    </HEAD>
    <BODY>

    <DIV id=eMeng>
    <TABLE style="BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid" 
        height    ="100" width="100%" cellSpacing="0" cellPadding="0" bgColor="#cfdef4" border="0">
          <TBODY>
          <TR>
            <TD id=title vAlign="center" width="88%" height=20>
              &nbsp;<FONT color=#0000ff><B><FONT color=#132235>您有新的短消息</FONT></B></FONT>
            </TD>
            <TD style="PADDING-RIGHT: 2px; BACKGROUND-IMAGE: none; PADDING-TOP: 2px" vAlign="center" align=right width=19>
              <DIV align=center>
              <SPAN title=关闭 
              style="FONT-WEIGHT: bold; FONT-SIZE: 12px; CURSOR: hand; COLOR: red; MARGIN-RIGHT: 4px" 
          onclick    =javascript:closeDiv();>
              <FONT color=#003399>×</FONT></SPAN></DIV>
            </TD>
          </TR>
          <TR vAlign=top>
            <TD colSpan=2>
              <DIV id=board>
              <P align=left>
              <A href="http://www.gaoshou.net/diange.htm" target=_blank><FONT color=#006600>免费短信点歌，给心上的人送祝福</FONT></A>
              <BR>
              <A href="#" target=_blank><FONT color=#ff0000><B><BR>QQ情侣号，形影不离</B></FONT></A>
              <BR>
              <A href="http://www.gaoshou.net/sms.htm"><FONT color=#006600><BR>手机铃声免费下载</FONT></A>
              </P>
              </DIV>
            </TD>
           </TR></TBODY></TABLE>
    </DIV>

    </BODY></HTML>


    <SCRIPT language=JavaScript>
    <!--
    window.onload     = getMsg; 
    window.onresize     = resizeDiv; 
    window.onerror     = function(){} 
    var divTop,divLeft,divWidth,divHeight,docHeight,docWidth,objTimer,i = 0; 

    function getMsg() 
    { 
    try{ 
    divTop     = parseInt(document.getElementById("eMeng").style.top,10) 
    divLeft     = parseInt(document.getElementById("eMeng").style.left,10) 
    divHeight     = parseInt(document.getElementById("eMeng").offsetHeight,10) 
    divWidth     = parseInt(document.getElementById("eMeng").offsetWidth,10) 
    docWidth     = document.body.clientWidth; 
    docHeight     = document.body.clientHeight; 
    document.getElementById(    "eMeng").style.top = parseInt(document.body.scrollTop,10) + docHeight + 10;// divHeight 
    document.getElementById("eMeng").style.left = parseInt(document.body.scrollLeft,10) + docWidth - divWidth 
    document.getElementById(    "eMeng").style.visibility="visible" 
    objTimer     = window.setInterval("moveDiv()",10) 
    } 
    catch(e){} 
    } 

    function resizeDiv() 
    { 
    try{ 
    divHeight     = parseInt(document.getElementById("eMeng").offsetHeight,10) 
    divWidth     = parseInt(document.getElementById("eMeng").offsetWidth,10) 
    docWidth     = document.body.clientWidth; 
    docHeight     = document.body.clientHeight; 
    document.getElementById(    "eMeng").style.top = docHeight - divHeight + parseInt(document.body.scrollTop,10) 
    document.getElementById(    "eMeng").style.left = docWidth - divWidth + parseInt(document.body.scrollLeft,10) 
    } 
    catch(e){} 
    } 

    function moveDiv() 
    { 
    try 
    { 
    if(parseInt(document.getElementById("eMeng").style.top,10) <= (docHeight - divHeight + parseInt(document.body.scrollTop,10))) 
    { 
    window.clearInterval(objTimer) 
    objTimer     = window.setInterval("resizeDiv()",1) 
    } 
    divTop     = parseInt(document.getElementById("eMeng").style.top,10) 
    document.getElementById(    "eMeng").style.top = divTop - 1 
    } 
    catch(e){} 
    } 

    function closeDiv() 
    { 
    document.getElementById('eMeng').style.visibility    ='hidden'; 
    if(objTimer) window.clearInterval(objTimer) 
    } 
    //-->
    </SCRIPT>
  • 相关阅读:
    mysql 删除与安装
    mysql 中文乱码 或 问号
    系统锁屏
    技术相关
    织梦 php 网站建设
    linux mysql 安装与使用
    技术收集
    批处理 关闭 进程
    二十三种设计模式
    三星(samsung)手机i699内容：解锁boot loader,刷recovery,刷机(刷rom),root综合教程
  • 原文地址：https://www.cnblogs.com/publicbill/p/363638.html
Copyright © 2011-2022 走看看