<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>右下角信息提示</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div{
margin:0px;
}
div.border{
width:200px;
height:auto;
border:1px solid green;
font-size:14px;
color:red;
background-color:#CFDEF4;
}
div.title{
font-size:12px;
width:200px;
height:20px;
color:blue;
border-bottom:1px solid green;
cursor: hand;
font-weight:bold;
text-indent:8px;
}
div.content{
width:200px;
height:100px;
text-align:center;
}
span.tip{
float:left;
text-align:left;
text-indent:8px;
padding:3px;
margin-right:50px;
color:#0C53C5;
}
span.Min{
padding:3px;
float:left;
color:Red;
cursor: pointer;
font-weight:bold;
}
span.Close{
padding:3px;
float:left;
color:Red;
cursor: pointer;
font-weight:bold;
}
</style>
</head>
<script type="text/javascript">
var divHeight,divWidth,divTop,divLeft,docHeight,docWidth,i = 0;
var divContentHeight = 100,divTitleHeight= 20;
var msgPop = new Object();
msgPop.id ="msgPop";
msgPop.obj = function (){
return document.getElementById(msgPop.id);
}
/**
创建消息提示框
*/
msgPop.createInstance = function(divMsg){
if(msgPop.obj()){
var pNode = msgPop.obj().parentNode;
pNode.removeChild(msgPop.obj());
}
var objDiv = document.createElement("Div");
objDiv.id = msgPop.id;
objDiv.style.width="200px";
objDiv.style.visibility="hidden";
objDiv.style.position="absolute";
objDiv.style.zIndex="99999";
objDiv.style.left="0px";
objDiv.style.top="0px";
objDiv.innerHTML = divMsg;
document.body.appendChild(objDiv);
}
/**
当窗口加载时,打印消息提示框
*/
function loadMsg(){
var msg = "<div class=\"border\">"+
"<div class=\"title\">"+
"<span class=\"tip\">消息提示</span>"+
"<span id=\"msgMin\" title=\"最小化窗口\" class=\"Min\" οnclick=\"winConvert();\"><b>小</b></span>"+
"<span id=\"msgClose\" title=\"关闭\" class=\"Close\" οnclick=\"msgClose();\">关</span>"+
"</div>"+
"<div id=\"msgContent\" class=\"content\">内容区"+
"</div>"+
"</div>";
init(msg);
}
/**
开始加载消息框
*/
function init(divMsg){
msgPop.createInstance(divMsg);
msgPop.onload();
}
/**
设置消息框加载时的高度
*/
msgPop.onload = function(){
divHeight = parseInt(msgPop.obj().offsetHeight,10);//消息框的高度
divWidth = parseInt(msgPop.obj().offsetWidth,10);//消息框的宽度
divTop = parseInt(msgPop.obj().style.top,10)//消息框的顶部位置
divLeft = parseInt(msgPop.obj().style.left,10);//消息框的左边位置
docHeight= document.body.clientHeight;//body高度
docWidth =document.body.clientWidth;//body宽度
msgPop.obj().style.top = parseInt(document.body.scrollTop,10) + docHeight+10;
msgPop.obj().style.left = parseInt(document.body.scrollLeft,10) + docWidth - divWidth;
msgPop.obj().style.visibility="visible";
msgPop.timer = window.setInterval(msgPop.moveUp,2);
}
/**
消息框慢慢的从下面移动出来
*/
msgPop.moveUp = function(){
var top = parseInt(msgPop.obj().style.top,10);
var height = docHeight - divHeight + parseInt(document.body.scrollTop,10)
try{
if(top <= height){
window.clearInterval(msgPop.timer);
//msgPop.timer = window.setInterval(msgPop.onResize,2);
}
divTop = parseInt(msgPop.obj().style.top,10);
msgPop.obj().style.top = divTop - 1;
}catch(e){
}
}
/**
消息框慢慢的从上移下去
*/
msgPop.moveDown = function(){
var top = parseInt(msgPop.obj().style.top,10);
var height = docHeight - divHeight+divContentHeight + parseInt(document.body.scrollTop,10)
try{
if(top >= height){
window.clearInterval(msgPop.timer);
//msgPop.timer = window.setInterval(msgPop.onResize,2);
}
divTop = parseInt(msgPop.obj().style.top,10);
msgPop.obj().style.top = divTop + 1;
}catch(e){
}
}
/**
当屏幕变化时,重新调整高度
*/
msgPop.onResize = function(){
try{
divHeight = parseInt(msgPop.obj().offsetHeight,10);
divWidth = parseInt(msgPop.obj().offsetWidth,10);
docHeight= document.body.clientHeight;
docWidth =document.body.clientWidth;
msgPop.obj().style.top = docHeight - divHeight + parseInt(document.body.scrollTop,10);
msgPop.obj().style.left = docWidth - divWidth+ parseInt(document.body.scrollLeft,10);
}catch(e){
}
}
/**
关闭消息框
*/
msgPop.close = function(){
if(msgPop.obj()){
var pNode = msgPop.obj().parentNode;
pNode.removeChild(msgPop.obj());
}
if(msgPop.timer){
window.clearInterval(msgPop.timer);
}
}
/**
关闭消息框
*/
function msgClose(){
msgPop.close();
}
msgPop.convertWin = function (){
var msgContent = document.getElementById("msgContent");
var msgMin = document.getElementById("msgMin");
var flag = msgContent.style.display == "none";
if(flag){
msgMin.innerHTML="<b>小</b>";
msgMin.title="最小化窗口";
msgContent.style.display="block";
msgPop.timer = window.setInterval(msgPop.moveUp,2);
}else{
msgMin.innerHTML="<b>大</b>";
msgMin.title="最大化窗口";
msgContent.style.display="none";
msgPop.timer = window.setInterval(msgPop.moveDown,1);
}
}
/**
窗口变化
*/
function winConvert(){
msgPop.convertWin();
}
</script>
<body>
<!--
<div class="border">
<div class="title">
<span class="tip">消息提示</span>
<span id="msgMin" title="最小化窗口" class="msgMin">-</span>
<span id="msgClose" title="关闭" class="msgClose" οnclick=\"msgPop.close()\">x</span>
</div>
<div id="msgContent" class="content">内容区</div>
</div>
-->
<script type="text/javascript">
window.onload = loadMsg;
window.onresize = msgPop.onResize;
</script>
</body>
</html>
老裴帮助关于右下角消息提示框的小练习
最新推荐文章于 2021-05-30 09:32:15 发布