请问qq空间登录的那种效果怎样做的啊?

这都是用javascript+css实现的，我以前收藏得有，找找看，如果找到，给你
// global variables //
var TIMER = 5;
var SPEED = 10;
var WRAPPER = 'content';// calculate the current window width //
function pageWidth() {
  return window.innerWidth != null ? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
}// calculate the current window height //
function pageHeight() {
  return window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;
}// calculate the current window vertical offset //
function topPosition() {
  return typeof window.pageYOffset != 'undefined' ? window.pageYOffset : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ? document.body.scrollTop : 0;
}// calculate the position starting at the left of the window //
function leftPosition() {
  return typeof window.pageXOffset != 'undefined' ? window.pageXOffset : document.documentElement && document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ? document.body.scrollLeft : 0;
}// build/show the dialog box, populate the data and call the fadeDialog function //
function showDialog(title,message,type,autohide) {
  if(!type) {
    type = 'error';
  }
  var dialog;
  var dialogheader;
  var dialogclose;
  var dialogtitle;
  var dialogcontent;
  var dialogmask;
  if(!document.getElementById('dialog')) {
    dialog = document.createElement('div');
    dialog.id = 'dialog';
    dialogheader = document.createElement('div');
    dialogheader.id = 'dialog-header';
    dialogtitle = document.createElement('div');
    dialogtitle.id = 'dialog-title';
    dialogclose = document.createElement('div');
    dialogclose.id = 'dialog-close'
    dialogcontent = document.createElement('div');
    dialogcontent.id = 'dialog-content';
    dialogmask = document.createElement('div');
    dialogmask.id = 'dialog-mask';
    document.body.appendChild(dialogmask);
    document.body.appendChild(dialog);
    dialog.appendChild(dialogheader);
    dialogheader.appendChild(dialogtitle);
    dialogheader.appendChild(dialogclose);
    dialog.appendChild(dialogcontent);;
    dialogclose.setAttribute('onclick','hideDialog()');
    dialogclose.onclick = hideDialog;
  } else {
    dialog = document.getElementById('dialog');
    dialogheader = document.getElementById('dialog-header');
    dialogtitle = document.getElementById('dialog-title');
    dialogclose = document.getElementById('dialog-close');
    dialogcontent = document.getElementById('dialog-content');
    dialogmask = document.getElementById('dialog-mask');
    dialogmask.style.visibility = "visible";
    dialog.style.visibility = "visible";
  }
  dialog.style.opacity = .00;
  dialog.style.filter = 'alpha(opacity=0)';
  dialog.alpha = 0;
  var width = pageWidth();
  var height = pageHeight();
  var left = leftPosition();
  var top = topPosition();
  var dialogwidth = dialog.offsetWidth;
  var dialogheight = dialog.offsetHeight;
  var topposition = top + (height / 3) - (dialogheight / 2);
  var leftposition = left + (width / 2) - (dialogwidth / 2);
  dialog.style.top = topposition + "px";
  dialog.style.left = leftposition + "px";
  dialogheader.className = type + "header";
  dialogtitle.innerHTML = title;
  dialogcontent.className = type;
  dialogcontent.innerHTML = message;
  var content = document.getElementById(WRAPPER);
  dialogmask.style.height = content.offsetHeight + 'px';
  dialog.timer = setInterval("fadeDialog(1)", TIMER);
  if(autohide) {
    dialogclose.style.visibility = "hidden";
    window.setTimeout("hideDialog()", (autohide * 1000));
  } else {
    dialogclose.style.visibility = "visible";
  }
}// hide the dialog box //
function hideDialog() {
  var dialog = document.getElementById('dialog');
  clearInterval(dialog.timer);
  dialog.timer = setInterval("fadeDialog(0)", TIMER);
}// fade-in the dialog box //
function fadeDialog(flag) {
  if(flag == null) {
    flag = 1;
  }
  var dialog = document.getElementById('dialog');
  var value;
  if(flag == 1) {
    value = dialog.alpha + SPEED;
  } else {
    value = dialog.alpha - SPEED;
  }
  dialog.alpha = value;
  dialog.style.opacity = (value / 100);
  dialog.style.filter = 'alpha(opacity=' + value + ')';
  if(value >= 99) {
    clearInterval(dialog.timer);
    dialog.timer = null;
  } else if(value <= 1) {
    dialog.style.visibility = "hidden";
    document.getElementById('dialog-mask').style.visibility = "hidden";
    clearInterval(dialog.timer);
  }
}
body {margin:0; font-family:Verdana, Arial, Helvetica; font-size:14px}
#content {padding:20px}
#dialog {position:absolute; width:425px; padding:10px; z-index:200; background:#fff}
#dialog-header {display:block; position:relative; width:411px; padding:3px 6px 7px; height:14px; font-size:14px; font-weight:bold}
#dialog-title {float:left}
#dialog-close {float:right; cursor:pointer; margin:3px 3px 0 0; height:11px; width:11px; background:url(images/dialog_close.gif) no-repeat}
#dialog-content {display:block; height:160px; padding:6px; color:#666666; font-size:13px}
#dialog-mask {position:absolute; top:0; left:0; min-height:100%; width:100%; background:#FFF; opacity:.75; filter:alpha(opacity=75); z-index:100}
.error {background:#fff url(images/error_bg.jpg) bottom right no-repeat; border:1px solid #924949; border-top:none}
.errorheader {background:url(images/error_header.gif) repeat-x; color:#6f2c2c; border:1px solid #924949; border-bottom:none}
.warning {background:#fff url(images/warning_bg.jpg) bottom right no-repeat; border:1px solid #c5a524; border-top:none}
.warningheader {background:url(images/warning_header.gif) repeat-x; color:#957c17; border:1px solid #c5a524; border-bottom:none}
.success {background:#fff url(images/success_bg.jpg) bottom right no-repeat; border:1px solid #60a174; border-top:none}
.successheader {background:url(images/success_header.gif) repeat-x; color:#3c7f51; border:1px solid #60a174; border-bottom:none}
.prompt {background:#fff url(images/prompt_bg.jpg) bottom right no-repeat; border:1px solid #4f6d81; border-top:none}
.promptheader {background:url(images/prompt_header.gif) repeat-x; color:#355468; border:1px solid #4f6d81; border-bottom:none}
下面是调用的例子以下是调用页面例子
[code=HTML]
<!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=iso-8859-1" />
<title>Custom JavaScript Dialog Boxes</title>
<link rel="stylesheet" type="text/css" href="dialog_box.css" />
<script type="text/javascript" src="dialog_box.js"></script>
</head>
<body>
<div id="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin enim diam, imperdiet eget, luctus eget, rhoncus vel, lacus. Maecenas ipsum nulla, pretium vel, vehicula a, tincidunt luctus, dui. Donec adipiscing. Sed aliquet, lorem id porttitor vestibulum, libero pede pretium sem, id iaculis mauris ante a orci. Etiam mi felis, adipiscing nec, aliquet vel, hendrerit non, libero. Curabitur posuere pede vitae enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin sem. Pellentesque iaculis. Morbi at tellus a velit venenatis tempor. Vivamus quam augue, commodo sed, dapibus nec, posuere in, augue. Mauris ultrices. Integer fringilla turpis et dui. Quisque varius elementum ipsum. Aenean pede. Sed vestibulum condimentum ipsum.
<br /><br />
Pellentesque suscipit interdum eros. Vivamus molestie. Quisque id massa. Suspendisse dictum, neque nec varius imperdiet, nisl sem interdum pede, ut lacinia ligula justo vel odio. Fusce urna ipsum, hendrerit pellentesque, condimentum ut, commodo eu, risus. Etiam blandit sapien vitae nunc. Phasellus convallis bibendum purus. Vestibulum sed velit eu nulla fringilla molestie. Aenean orci dui, laoreet at, aliquam a, iaculis vel, metus. Maecenas vestibulum diam nec arcu. Suspendisse eros. Curabitur euismod ultrices lacus. Donec lacus diam, ultricies vitae, vehicula at, laoreet at, enim. Sed tempus, dolor non gravida tincidunt, massa ante imperdiet lacus, sed lobortis velit nulla et mauris. Donec sollicitudin tincidunt sem. Praesent pretium neque eget sem. Integer eu metus vel mi porttitor sollicitudin. Nulla egestas elit a arcu bibendum feugiat. Integer convallis eleifend lorem.
<br /><br />
<a href="javascript:showDialog('Error','You have encountered a critical error.','error',2);">Error</a> |
<a href="javascript:showDialog('Warning','You must enter all required information.','warning');">Warning</a> |
<a href="javascript:showDialog('Success','Your request has been successfully received.','success');">Success</a> |
<a href="javascript:showDialog('Confirmation','Are you sure you want to delete the entry?','prompt');">Prompt</a> -
<a href="http://www.leigeber.com/2008/04/custom-javascript-dialog-boxes/">Return to the post at leigeber.com</a>
<br /><br />
Proin erat elit, aliquam nec, lobortis vel, vulputate in, justo. Phasellus rutrum orci eu dui. Ut iaculis nunc ut lacus. Quisque a turpis eget purus dapibus pretium. Nunc sem lacus, consectetuer vitae, vehicula sit amet, semper et, enim. Etiam non risus. Quisque id elit a enim tempus convallis. Duis lacinia, dui vel euismod eleifend, nisl mauris pharetra arcu, et congue augue mauris sed libero. Sed suscipit justo sed orci. Aliquam non nisl id orci lobortis pretium. Sed nec odio ac mi sagittis dapibus. Pellentesque sollicitudin metus ut purus consectetuer sollicitudin. Nam accumsan tempor tortor. Donec odio.
<br /><br />
Integer quis nisl vel purus condimentum mollis. Sed vel ipsum at libero convallis mattis. Donec dictum nisl eget sem. Quisque id eros. Cras tincidunt sem vel quam molestie lacinia. Quisque tempor facilisis massa. Quisque nibh. Fusce quis justo. Fusce elit. Vivamus tincidunt imperdiet massa. Aenean sagittis semper velit. Duis pharetra accumsan purus.
<br /><br />
Aliquam luctus, quam eget tristique porta, metus nunc congue mauris, in venenatis nunc massa quis magna. Curabitur sagittis ipsum nec felis. Aliquam pulvinar. Phasellus eget lacus. Donec suscipit mi sit amet lectus. Praesent sodales vehicula erat. Maecenas vulputate nibh at eros. Sed ac dui. Phasellus nunc lorem, porttitor non, sagittis vitae, auctor sit amet, mi. Nunc tempor mi at turpis. Praesent quam turpis, aliquet sit amet, egestas et, bibendum id, nibh. Cras imperdiet, libero eget bibendum lobortis, elit ligula pulvinar massa, sed mollis sapien orci non est. Nulla rhoncus massa eu sem. Nunc gravida dignissim diam. Proin orci leo, dapibus fringilla, cursus ac, pharetra volutpat, eros. In dolor enim, venenatis eget, aliquet vulputate, sollicitudin non, dolor. Morbi ac mi et diam ullamcorper vulputate. Cras laoreet, odio ac blandit ultricies, turpis mauris molestie lacus, et luctus metus mi et justo. Donec mattis arcu. Aliquam luctus ullamcorper odio.
<br /><br />
Proin erat elit, aliquam nec, lobortis vel, vulputate in, justo. Phasellus rutrum orci eu dui. Ut iaculis nunc ut lacus. Quisque a turpis eget purus dapibus pretium. Nunc sem lacus, consectetuer vitae, vehicula sit amet, semper et, enim. Etiam non risus. Quisque id elit a enim tempus convallis. Duis lacinia, dui vel euismod eleifend, nisl mauris pharetra arcu, et congue augue mauris sed libero. Sed suscipit justo sed orci. Aliquam non nisl id orci lobortis pretium. Sed nec odio ac mi sagittis dapibus. Pellentesque sollicitudin metus ut purus consectetuer sollicitudin. Nam accumsan tempor tortor. Donec odio.
<br /><br />
Integer quis nisl vel purus condimentum mollis. Sed vel ipsum at libero convallis mattis. Donec dictum nisl eget sem. Quisque id eros. Cras tincidunt sem vel quam molestie lacinia. Quisque tempor facilisis massa. Quisque nibh. Fusce quis justo. Fusce elit. Vivamus tincidunt imperdiet massa. Aenean sagittis semper velit. Duis pharetra accumsan purus.
<br /><br />
Aliquam luctus, quam eget tristique porta, metus nunc congue mauris, in venenatis nunc massa quis magna. Curabitur sagittis ipsum nec felis. Aliquam pulvinar. Phasellus eget lacus. Donec suscipit mi sit amet lectus. Praesent sodales vehicula erat. Maecenas vulputate nibh at eros. Sed ac dui. Phasellus nunc lorem, porttitor non, sagittis vitae, auctor sit amet, mi. Nunc tempor mi at turpis. Praesent quam turpis, aliquet sit amet, egestas et, bibendum id, nibh. Cras imperdiet, libero eget bibendum lobortis, elit ligula pulvinar massa, sed mollis sapien orci non est. Nulla rhoncus massa eu sem. Nunc gravida dignissim diam. Proin orci leo, dapibus fringilla, cursus ac, pharetra volutpat, eros. In dolor enim, venenatis eget, aliquet vulputate, sollicitudin non, dolor. Morbi ac mi et diam ullamcorper vulputate. Cras laoreet, odio ac blandit ultricies, turpis mauris molestie lacus, et luctus metus mi et justo. Donec mattis arcu. Aliquam luctus ullamcorper odio.
</div>
</body>
</html>
[/code]

调试易

请问qq空间登录的那种效果怎样做的啊?

解决方案 »