发新话题
打印

div自动弹出,然后逐渐隐藏的效果

div自动弹出,然后逐渐隐藏的效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DOM_text01</title>
<style type="text/css">
#msgwin{
 border:1px solid #ececec;
 background:#fefefe;
 width:200px;
 height:100px;
 text-align:center;
 padding-top:20px;
 color:#990000
}
</style>
</head>
<body onload="msgwin('欢迎进入双彩社区<br>双彩技术部', 2000)">
<div id="append_parent"></div>
<script type="text/javascript">
function msgwin(s, t) {
 
 var msgWinObj = document.getElementById('msgwin');
 if(!msgWinObj) {
  var msgWinObj = document.createElement("div");
  msgWinObj.id = 'msgwin';
  msgWinObj.style.display = 'none';
  msgWinObj.style.position = 'absolute';
  msgWinObj.style.zIndex = '100000';
  document.getElementById('append_parent').appendChild(msgWinObj);
 }
 msgWinObj.innerHTML = s;
 msgWinObj.style.display = '';
 msgWinObj.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=0)';
 msgWinObj.style.opacity = 0;
 var sTop = document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
 pbegin = sTop + (document.documentElement.clientHeight / 2);
 pend = sTop + (document.documentElement.clientHeight / 5);
 setTimeout(function () {showmsgwin(pbegin, pend, 0, t)}, 10);
 msgWinObj.style.left = ((document.documentElement.clientWidth - msgWinObj.clientWidth) / 2) + 'px';
 msgWinObj.style.top = pbegin + 'px';
}

function showmsgwin(b, e, a, t) {
 step = (b - e) / 10;
 var msgWinObj = document.getElementById('msgwin');
 newp = (parseInt(msgWinObj.style.top) - step);
 if(newp > e) {
  msgWinObj.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + a + ')';
  msgWinObj.style.opacity = a / 100;
  msgWinObj.style.top = newp + 'px';
  setTimeout(function () {showmsgwin(b, e, a += 10, t)}, 10);
 } else {
  msgWinObj.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=100)';
  msgWinObj.style.opacity = 1;
  setTimeout('displayOpacity(\'msgwin\', 100)', t);
 }
}
function displayOpacity(id, n) {
 if(!document.getElementById(id)) {
  return;
 }
 if(n >= 0) {
  n -= 10;
  document.getElementById(id).style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + n + ')';
  document.getElementById(id).style.opacity = n / 100;
  setTimeout('displayOpacity(\'' + id + '\',' + n + ')', 50);
 } else {
  document.getElementById(id).style.display = 'none';
  document.getElementById(id).style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=100)';
  document.getElementById(id).style.opacity = 1;
 }
}
</script>
</body>
</html>

TOP

发新话题