 |
热门文章 |
|
|
|
|
| 可最小化和关闭的右下角浮动窗口 |
| 来源：中国站长天空 更新时间：2010/4/15 22:46:43 阅读次数： 我要投稿 |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>可最小化和关闭的右下角浮动窗口</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
<!--
#loft_win {border:#0066FF 1px solid;}
#loft_win_min {border:#0066FF 1px solid;}
.loft_win_head {color: #FFFFFF; font-size:13px; background-color:#5e7aa6; height:25px; padding:0,5,0,5;}
#contentDiv {background-color:#FFFFFF; border:#0066FF 1px solid; border-left-style:none; border-right-style:none;}
-->
</style>
<script type="text/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("loft_win").style.top,10);
divLeft = parseInt(document.getElementById("loft_win").style.left,10);
divHeight = parseInt(document.getElementById("loft_win").offsetHeight,10);
divWidth = parseInt(document.getElementById("loft_win").offsetWidth,10);
docWidth = document.body.clientWidth;
docHeight = document.body.clientHeight;
document.getElementById("loft_win").style.top = parseInt(document.body.scrollTop,10) + docHeight + 10; //divHeight
document.getElementById("loft_win").style.left = parseInt(document.body.scrollLeft,10) + docWidth - divWidth;
document.getElementById("loft_win").style.visibility="visible";
objTimer = window.setInterval("moveDiv()",10);
}
catch(e){}
}
//初始化位置
function resizeDiv()
{
i+=1;
//if(i>300) closeDiv() //想不用自动消失由用户来自己关闭所以屏蔽这句
try
{
divHeight = parseInt(document.getElementById("loft_win").offsetHeight,10);
divWidth = parseInt(document.getElementById("loft_win").offsetWidth,10);
docWidth = document.body.clientWidth;
docHeight = document.body.clientHeight;
document.getElementById("loft_win").style.top = docHeight - divHeight + parseInt(document.body.scrollTop,10);
document.getElementById("loft_win").style.left = docWidth - divWidth + parseInt(document.body.scrollLeft,10);
}
catch(e){}
}
//最小化
function minsizeDiv()
{
i+=1
//if(i>300) closeDiv() //想不用自动消失由用户来自己关闭所以屏蔽这句
try
{
divHeight = parseInt(document.getElementById("loft_win_min").offsetHeight,10);
divWidth = parseInt(document.getElementById("loft_win_min").offsetWidth,10);
docWidth = document.body.clientWidth;
docHeight = document.body.clientHeight;
document.getElementById("loft_win_min").style.top = docHeight - divHeight + parseInt(document.body.scrollTop,10);
document.getElementById("loft_win_min").style.left = docWidth - divWidth + parseInt(document.body.scrollLeft,10);
}
catch(e){}
}
//移动
function moveDiv()
{
try
{
if(parseInt(document.getElementById("loft_win").style.top,10) <= (docHeight - divHeight + parseInt(document.body.scrollTop,10)))
{
window.clearInterval(objTimer);
objTimer = window.setInterval("resizeDiv()",1);
}
divTop = parseInt(document.getElementById("loft_win").style.top,10);
document.getElementById("loft_win").style.top = divTop -1;
}
catch(e){}
}
function minDiv()
{
closeDiv();
document.getElementById('loft_win_min').style.visibility='visible';
objTimer = window.setInterval("minsizeDiv()",1);
}
function maxDiv()
{
document.getElementById('loft_win_min').style.visibility='hidden';
document.getElementById('loft_win').style.visibility='visible';
objTimer = window.setInterval("resizeDiv()",1);
//resizeDiv()
getMsg();
}
function closeDiv()
{
document.getElementById('loft_win').style.visibility='hidden';
document.getElementById('loft_win_min').style.visibility='hidden';
if(objTimer) window.clearInterval(objTimer);
}
-->
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<!--初状态-->
<div id="loft_win" style="z-index:99999;left:0px;visibility:hidden;width:200px;position:absolute;top:0px;height:30px;">
<table cellSpacing="0" cellPadding="0" width="100%" bgcolor="#FFFFFF" border="0">
<tr>
<td width="100%" valign="top" align="center">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="70" class="loft_win_head"><span style="cursor:hand;font-size:12px;font-weight:bold;margin-right:4px;" title="最小化" onclick="minDiv()">会员助手</span></td>
<td width="26" class="loft_win_head"> </td>
<td align="right" class="loft_win_head"><span style="cursor:hand;font-size:12px;font-weight:bold;margin-right:4px;" title="最小化" onclick="minDiv()">-</span> <span style="cursor:hand;font-size:12px;font-weight:bold;margin-right:4px;" title="关闭" onclick="closeDiv()">×</span></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="30" align="center" valign="middle" colSpan="3">
<div id="contentDiv">
<table width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="left" height="100%" style="font-size:14px;padding:3px;"><div><p align="center">您已登陆，<a href="logout.asp">退出</a>！<br><a href="my.asp" title="查看以往发布的信息情况">查看我的信息</a></div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
<!--最小化状态-->
<div id="loft_win_min" style="z-index:99999;left:0px;visibility:hidden;width:200px;position:absolute;top:0px;">
<table cellSpacing="0" cellPadding="0" width="100%" bgcolor="#FFFFFF" border="0">
<tr>
<td width="100%" valign="top" align="center">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="70" class="loft_win_head"><span title="还原" style="cursor:hand;font-size:12px;font-weight:bold;margin-right:4px;" onclick="maxDiv()">展开助手</span></td>
<td width="26" class="loft_win_head"> </td>
<td align="right" class="loft_win_head"><span title="还原" style="cursor:hand;font-size:12px;font-weight:bold;margin-right:4px;" onclick="maxDiv()">□</span><span title="关闭" style="cursor:hand;font-size:12px;font-weight:bold;margin-right:4px;" onclick="closeDiv()">×</span></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html> |
|
| 上一篇文章： 固定在浏览器显示区域内的弹出提示层下一篇文章： 标准的DIV结构纯CSS Lightbox黑屏遮挡窗口效果 |
|
|
|
注册 登录
