`

使右下角出现DIV

音乐 
阅读更多
<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=gb2312"/>
<base href="http://dotnet.aspx.cc/">
<LINK href="Images/favicon.ico" rel="Shortcut Icon"/>
<LINK href="Detail.css" type="text/css" rel="stylesheet"/>
</HEAD>
<body>
<div id="eMeng" style="BORDER-RIGHT:#455690 1px solid; BORDER-TOP:#a6b4cf 1px solid; Z-INDEX:99999; LEFT:0px; VISIBILITY:hidden; BORDER-LEFT:#a6b4cf 1px solid; WIDTH:180px; BORDER-BOTTOM:#455690 1px solid; POSITION:absolute; TOP:0px; HEIGHT:116px; BACKGROUND-COLOR:#c9d3f3">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="BORDER-TOP:#ffffff 1px solid; BORDER-LEFT:#ffffff 1px solid"
bgcolor="#cfdef4">
<tr>
<td height="24" width="26" style="FONT-SIZE:12px;BACKGROUND-IMAGE:url(Images/msgTopBg.gif);COLOR:#0f2c8c"
  valign="middle"><img src="image/meng.gif" hspace="5" align="absMiddle" vspace="1"/></td>
<td style="FONT-WEIGHT:normal;FONT-SIZE:9pt;BACKGROUND-IMAGE:url(Images/msgTopBg.gif);COLOR:#1f336b;PADDING-TOP:4px"
  valign="middle" width="100%">温馨提示：</td>
<td style="BACKGROUND-IMAGE:url(Images/msgTopBg.gif);PADDING-TOP:2px" valign="middle"
  width="19" align="right"><img src="Images/msgClose.jpg" hspace="3" style="CURSOR:pointer" onclick="closeDiv()" title="关闭"/></td>
</tr>
<tr>
<td colspan="3" height="90" style="PADDING-RIGHT:1px;BACKGROUND-IMAGE:url(Images/msgBottomBg.jpg);PADDING-BOTTOM:1px">
  <div style="BORDER-RIGHT: #b9c9ef 1px solid; PADDING-RIGHT: 13px; BORDER-TOP: #728eb8 1px solid; PADDING-LEFT: 13px; FONT-SIZE: 9pt; PADDING-BOTTOM: 13px; BORDER-LEFT: #728eb8 1px solid; WIDTH: 100%; COLOR: #1f336b; PADDING-TOP: 18px; BORDER-BOTTOM: #b9c9ef 1px solid; HEIGHT: 100%">请打开您的音箱收听不同的音乐吧，随机播放。快试试吧！：）<br/>
   <div align="center"><a href="#" onclick="window.parent.frames['TopMusic'].location='Play.aspx';return false"
     style="FONT-WEIGHT:bold;COLOR:navy">收听全部</a></div>
  </div>
</td>
</tr>
</table>
</div>

<script language="JavaScript" type="text/javascript">
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()
{
i+=1
if(i>1288) closeDiv()
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)
}
window.onload = getMsg;
window.onresize = resizeDiv;
window.onerror = function(){return false}
</script>
</body>
</HTML>
分享到：
| 让 FireFox 也支持 outerHTML
评论
1 楼 ilovejf 2012-08-07  
滚动条怎么搞定？
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    div在右下角浮动

    浮层 广告 div右下角浮动 右下角浮动 浮动窗口。 兼容性良好。 很好用漂亮的东西。值得研究。

    悬浮右下角div

    悬浮右下角的div

    js 右下角弹出div 类似 QQ消息提示

    ### JavaScript 实现右下角弹出 DIV 类似 QQ 消息提示 #### 一、概述 在网页开发中，为了提升用户体验与交互性，我们常常需要实现类似即时通讯软件（如QQ）的消息提示功能。这类功能的核心在于能够在浏览器窗口的...

    右下角显示新消息 div+css

    为了使消息提示出现在右下角，我们可以使用`position`属性将其定位为绝对定位，并设定`bottom`和`right`值： ```css #messageNotification { position: fixed; /* 设置为绝对定位 */ bottom: 20px; /* 控制距离...

    网页右下角的Div消息框+jquery文件

    通过以上知识点的综合应用，我们可以创建一个功能完备且用户体验良好的网页右下角Div消息框。这个项目不仅展示了HTML、CSS和JavaScript的基础知识，还涵盖了前端开发中的动态效果和用户交互设计。在实际开发中，可以...

    网页右下角弹出提示框

    网页右下角弹出提示框是一种常见的用户交互设计，它能够有效地吸引用户的注意力，传递重要信息或引导用户进行特定操作。这种设计在许多网站和应用中都有应用，尤其是在电子商务、新闻资讯以及社交媒体平台中尤为常见...

    原生js div网页右下角浮动提示层可缩小和关闭浮动提示层

    3. **定位（Positioning）**：要使提示层在网页的右下角浮动，我们需要使用CSS的`position`属性设置为`fixed`，这样元素将相对于浏览器窗口定位，即使滚动页面也会保持在固定位置。 4. **浮動（Float）**：虽然通常...

    js右下角弹框

    根据提供的文件信息，本文将详细解析“js右下角弹框”的实现原理和技术要点，并针对提供的三种JavaScript弹框示例进行深入分析。 ### 一、理解JS右下角弹框 #### 1.1 弹框简介 在网页设计中，右下角弹出窗口是一种...

    jQuery javascript js html h5 屏幕 右下角弹窗 自动提醒

    2. **CSS样式**：使用HTML5的语义化标签如`&lt;section&gt;`、`&lt;article&gt;`或自定义的`&lt;div&gt;`来构建弹窗的内容，通过CSS3设置样式，使其定位在屏幕的右下角。可以使用`position: fixed;`、`bottom: 0;`和`right: 0;`属性...

    右下角弹出提醒

    在网页设计和开发中，"右下角弹出提醒"是一种常见的用户交互功能，它能够及时向用户显示信息，如通知、提示或者广告。这种功能通常由CSS（层叠样式表）、HTML（超文本标记语言）和JavaScript（脚本语言）这三种核心...

    jQuery仿QQ右下角抖动效果

    接下来，创建一个用于抖动效果的元素，例如一个div，我们可以设置其初始样式，如定位在屏幕右下角： ```html &lt;div id="shake-box" style="position: fixed; bottom: 20px; right: 20px; width: 200px; height: 50px;...

    两个DIV的相对位置(右上角)

    要使两个DIV位于右上角，我们首先需要创建这两个元素，并为它们设置适当的CSS样式。假设我们有两个DIV，分别名为`div1`和`div2`，我们可以这样做： ```html &lt;div id="div1"&gt;这是div1&lt;/div&gt; &lt;div id="div2"&gt;这是div2...

    网页右下角弹窗

    为右下角弹窗定制样式，可以设置其位置（通常使用绝对定位，结合`right`和`bottom`属性使其位于屏幕右下角）、大小、颜色、边框、阴影等效果。CSS3引入了许多新特性，如过渡（transition）和动画（animation），使得...

    jquery实现网页右侧可展开折叠的DIV特效

    通过CSS样式，我们可以对`DIV`进行定位，使其始终固定在页面的右侧。在这个特效中，我们不仅需要将`DIV`设置为固定位置，还需要添加交互性，使用户能够通过点击来控制其展开和折叠状态。 实现这个效果的关键在于...

    jquery实现页面右下角消息提示框

    可以创建一个隐藏的`div`，并设置相应的CSS样式使其位于页面右下角： ```html &lt;div id="messageBox" style="display: none; position: fixed; bottom: 20px; right: 20px; padding: 10px; background-color: #fff; ...

    JS右下角弹窗两例JS右下角弹窗两例

    接着，可以创建一个HTML结构来表示弹窗，并通过CSS进行样式设置，使其定位在页面的右下角。例如： ```html &lt;div id="jquery_popup" style="display:none; position:fixed; bottom:20px; right:20px;"&gt; 这是jQuery...

    js 右下角弹出代码

    在JavaScript编程中，右下角弹出代码通常用于创建一种通知、消息提示或者广告展示的效果。这类代码可以模仿像百度这样的大型网站所采用的交互设计，以吸引用户的注意力，同时保持页面的整洁和非侵入性。下面我们将...

    实用右下角弹出菜单（支持firefox、IE6、IE7）

    本文将详细讲解如何实现一个实用的右下角弹出菜单，该菜单兼容Firefox、Internet Explorer 6 (IE6) 和 Internet Explorer 7 (IE7) 浏览器，并具有自定义关闭和自动消失功能。 首先，让我们了解弹出菜单的基本构建。...

    .net 网页右下角弹窗

    在.NET框架中，实现网页右下角弹窗功能通常是用于向用户展示临时通知、提示信息或者简单的交互。这种功能在Web开发中很常见，尤其是在构建动态交互式网站时。本篇将详细介绍如何在.NET环境中创建一个右下角弹出窗口...

    网页右下角滑动广告窗

    网页右下角滑动广告窗是一种常见的网页交互设计，它通常出现在页面的右下角，随着用户滚动页面而上下移动，吸引用户的注意力。这种广告形式在互联网营销中颇为流行，因为它能够在不影响主要内容浏览的情况下，有效地...

Magicbox
Global site tag (gtag.js) - Google Analytics