js特效-渐现、一边进入、拌动、两边向中间弹出窗口

此特效需要本人所写的前几个JS特效源码

filter.js

drop.js

bounce.js

blind.js

clip.js

slide.js

如有需要，请看本人前几篇博客，

由于本人比较懒散，所以源码的注示比较少，请原谅

js源码dialog.js

// JavaScript Document
/*
 * @function dialog
 *  @description dialogId对话框id,effect特效(可选,默认随机),className对话框样式(默认dialog,可选)，templateHtml对话框内容(可选)
 */
function dialog(dialogId, effect, className, templateHtml){
 var d = this;
 var loading = null;
 this.mask = null;
 this.dialog = null;
 var effect = effect;
 var isRand = false;
 var isOpen = false;
 var isShow = false;
 var loadImgTimer = null;
 var init = function(){
  d.dialog = document.getElementById(dialogId);
  if(d.dialog){
   if(className){
    d.dialog.setAttribute("class", className);
    d.dialog.setAttribute("className", className);
   }
  }
  else{
   d.dialog = document.createElement("div");
   d.dialog.setAttribute("id", dialogId);
   if(className){
    d.dialog.setAttribute("class", className);
    d.dialog.setAttribute("className", className);
   }
   else{
    d.dialog.setAttribute("class", "dialog");
    d.dialog.setAttribute("className", "dialog");
   }
   document.body.appendChild(d.dialog);
  }
  d.dialog.style.zIndex = 1000;
  
  if(templateHtml){
   d.dialog.innerHTML = templateHtml;
  }
  d.mask = document.getElementById("mask");
  if(!d.mask){
   d.mask = document.createElement("div");
   d.mask.setAttribute("id", "mask");
   d.mask.setAttribute("class", "mask");
   d.mask.setAttribute("className", "mask");
   d.mask.style.display = "none";
   document.body.appendChild(d.mask);
  }
 };
 
 this.open = function(isMode, func){
  if(isOpen)
   return;
  isOpen = true;
  
  if(isMode)
   this.mask.style.display = "block";
  
  if(!effect){
   if(d.dialog.style)
    d.dialog.removeAttribute("style");
   d.dialog.style.display= "block";
   d.dialog.style.position = "absolute";
   d.dialog.style.marginLeft = 0-d.dialog.offsetWidth/2 + "px";
   d.dialog.style.marginTop = 0-d.dialog.offsetHeight/2 + "px";
   d.dialog.style.display = "none";
   
   var rand = getRand();
   isRand = true;
   switch(rand){
    case 0 :
     effect = new filter(this.dialog.id, 10);
     break;
    case 1 :
     effect = new drop(this.dialog.id, "up", 60, true);
     break;
    case 2 :
     effect = new drop(this.dialog.id, "down", 60, true);
     break;
    case 3 :
     effect = new drop(this.dialog.id, "left", 100, true);
     break;
    case 4 :
     effect = new drop(this.dialog.id, "right", 100, true);
     break;
    case 5 :
     effect = new slide(this.dialog.id, "up", 100, true);
     break;
    case 6 :
     effect = new slide(this.dialog.id, "down", 100, true);
     break;
    case 7 :
     effect = new slide(this.dialog.id, "left", 100, true);
     break;
    case 8 :
     effect = new slide(this.dialog.id, "right", 100, true);
     break;
    case 9 :
     effect = new bounce(this.dialog.id, "up", 100, true);
     break;
    case 10 :
     effect = new bounce(this.dialog.id, "down", 100, true);
     break;
    case 11 :
     effect = new bounce(this.dialog.id, "left", 100, true);
     break;
    case 12 :
     effect = new bounce(this.dialog.id, "right", 100, true);
     break;
    case 13 :
     effect = new blind(this.dialog.id, "up", 100, true);
     break;
    case 14 :
     effect = new blind(this.dialog.id, "down", 100, true);
     break;
    case 15 :
     effect = new blind(this.dialog.id, "left", 100, true);
     break;
    case 16 :
     effect = new blind(this.dialog.id, "right", 100, true);
     break;
    case 17:
     effect = new clip(this.dialog.id, "v", 50, true);
     break;
    case 18:
     effect = new clip(this.dialog.id, "h", 50, true);
     break;
    case 19:
     effect = new flod(this.dialog.id, "v", 60, true);
     break;
    case 20:
     effect = new flod(this.dialog.id, "h", 60, true);
     break;
    default :
     effect = new filter(this.dialog.id, 10);
     break;
     
   }
  }

  if(effect){
   d.show(func);
  }
  else{
   this.dialog.style.visibility = "visible";
   this.dialog.style.display = "block";
  }
 };
 
 this.close = function(func){
  if(!isOpen)
   return;
  isOpen = false;
  isShow = false;
  if(effect){
   if(isRand){
    effect.hide(function(){if(func)func();d.setEffect(null);d.setMask(true);});
   }
   else{
    effect.hide(function(){if(func)func();d.setMask(true);});
   }
  }
  else{
   d.setEffect(null);
   d.setMask(true);
   this.dialog.style.visibility = "hidden";
   this.dialog.style.display = "none";
   if(func)
    func();
  }
 };
 this.show = function(func){
  if(!isShow && effect)
   effect.show(func);
  isShow = true;
 };
 var createLoading = function(){
  loading = document.createElement("div");
  loading.style.display = "none";
  loading.style.position = "absolute";
  loading.style.zIndex = 1100;
  loading.style.width = "100px";
  loading.style.height = "100px";
  loading.style.left = "50%";
  loading.style.top = "40%";
  loading.style.marginTop = "-50px";
  loading.style.marginLeft = "-50px";
  var img = document.createElement("img");
  img.setAttribute("src", "themes/default/images/loading.gif");
  img.style.width = "100px";
  img.style.height = "100px";
  loading.appendChild(img);
  document.body.appendChild(loading);
 };
 var getRand = function(){
  var rand = parseInt(Math.random() * 100 * 20)%20;
  isRand = true;
  return rand;
 };
 
 this.setEffect = function(e){
  effect = e;
 };
 this.setMask = function(isHide){
  if(isHide)
   this.mask.style.display = "none";
  else
   this.mask.style.display = "block";
 }
 this.setHtml = function(html){
  this.dialog.innerHTML = html;
 };
 init();
 return this;
};

 

测试源码:

dialog.css

@charset "utf-8";
/* CSS Document */
.mask{
 width:100%;
 height:100%;
 background:#FFF;
 opacity:0.4;
 filter:alpha(opacity:40);
 z-index:999;
 top:0px;
 left:0px;
 position:absolute;
}
.dialog{
 width:300px;
 height:200px;
 background:#fff;
 top:50%;
 left:50%;
 margin-left:-100px;
 margin-top:-100px;
 position:absolute;
 display:none;
}

 

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=utf-8" />
<title>dialog</title>
<link href="dialog.css" type="text/css" rel="stylesheet" />
<style>
*{
 padding:0px;
 margin:0px;
}
body{
 text-align:center;
 height:100%;
}
.dialog{
 width:200px;
 height:100px;
 background:#fff;
 border:1px #000 solid;
 top:50%;
 left:50%;
 margin-left:-100px;
 margin-top:-50px;
 position:absolute;
 display:none;
}
</style>
</head>

<body>
<input type="button" value="打开渐现对话框" onclick="filter_dlg.open(true);"/>
<input type="button" value="打开渐现进入对话框" onclick="drop_dlg.open(true);"/>
<input type="button" value="打开弹跳对话框" onclick="bounce_dlg.open(true);"/>
<input type="button" value="打开向一边显示对话框" onclick="blind_dlg.open(true);"/>
<input type="button" value="打开向两边显示对话框" onclick="clip_dlg.open(true);"/>
<input type="button" value="打开向一向进入对话框" onclick="slide_dlg.open(true);"/>
<input type="button" value="随机特效对话框" onclick="rand_dlg.open(true);"/>
<div id="dialog" class="dialog">
    用户名:<input type="text" /><br />
    密码：<input type="text" /><br/>
    <input type="button" value="关闭窗口" onclick="filter_dlg.close();"/>
</div>

<div id="dialog1" class="dialog">
    用户名:<input type="text" /><br />
    密码：<input type="text" /><br/>
    <input type="button" value="关闭窗口" onclick="drop_dlg.close();"/>
</div>

<div id="dialog2" class="dialog">
     用户名:<input type="text" /><br />
    密码：<input type="text" /><br/>
    <input type="button" value="关闭窗口" onclick="bounce_dlg.close();"/>
</div>

<div id="dialog3" class="dialog">
    用户名:<input type="text" /><br />
    密码：<input type="text" /><br/>
    <input type="button" value="关闭窗口" onclick="blind_dlg.close();"/>
</div>

<div id="dialog4" class="dialog">
    用户名:<input type="text" /><br />
    密码：<input type="text" /><br/>
    <input type="button" value="关闭窗口" onclick="clip_dlg.close();"/>
</div>

<div id="dialog5" class="dialog">
    用户名:<input type="text" /><br />
    密码：<input type="text" /><br/>
    <input type="button" value="关闭窗口" onclick="slide_dlg.close();"/>
</div>

<div id="dialog6" class="dialog">
    用户名:<input type="text" /><br />
    密码：<input type="text" /><br/>
    <input type="button" value="关闭窗口" onclick="rand_dlg.close();"/>
</div>
<div id="text">
</div>
</body>
<script src="dialog.js"></script>
<script src="filter.js"></script>
<script src="drop.js"></script>
<script src="bounce.js"></script>
<script src="blind.js"></script>
<script src="clip.js"></script>
<script src="slide.js"></script>
<script>
var filter_effect = new filter("dialog", 10);
var filter_dlg = new dialog("dialog", filter_effect);

var drop_effect = new drop("dialog1", "up", 30);
var drop_dlg = new dialog("dialog1", drop_effect);

var bounce_effect = new bounce("dialog2", "up", 50);
var bounce_dlg = new dialog("dialog2", bounce_effect);

var blind_effect = new blind("dialog3", "up", 10);
var blind_dlg = new dialog("dialog3", blind_effect);

var clip_effect = new clip("dialog4", "h", 10);
var clip_dlg = new dialog("dialog4", clip_effect);

var slide_effect = new slide("dialog5", "up", 10);
var slide_dlg = new dialog("dialog5", slide_effect);

var rand_dlg = new dialog("dialog6");
</script>
</html>