此特效需要本人所寫的前幾個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="打開漸現對話框" οnclick="filter_dlg.open(true);"/>
<input type="button" value="打開漸現進入對話框" οnclick="drop_dlg.open(true);"/>
<input type="button" value="打開彈跳對話框" οnclick="bounce_dlg.open(true);"/>
<input type="button" value="打開向一邊顯示對話框" οnclick="blind_dlg.open(true);"/>
<input type="button" value="打開向兩邊顯示對話框" οnclick="clip_dlg.open(true);"/>
<input type="button" value="打開向一向進入對話框" οnclick="slide_dlg.open(true);"/>
<input type="button" value="隨機特效對話框" οnclick="rand_dlg.open(true);"/>
<div id="dialog" class="dialog">
用戶名:<input type="text" /><br />
密碼:<input type="text" /><br/>
<input type="button" value="關閉窗口" οnclick="filter_dlg.close();"/>
</div>
<div id="dialog1" class="dialog">
用戶名:<input type="text" /><br />
密碼:<input type="text" /><br/>
<input type="button" value="關閉窗口" οnclick="drop_dlg.close();"/>
</div>
<div id="dialog2" class="dialog">
用戶名:<input type="text" /><br />
密碼:<input type="text" /><br/>
<input type="button" value="關閉窗口" οnclick="bounce_dlg.close();"/>
</div>
<div id="dialog3" class="dialog">
用戶名:<input type="text" /><br />
密碼:<input type="text" /><br/>
<input type="button" value="關閉窗口" οnclick="blind_dlg.close();"/>
</div>
<div id="dialog4" class="dialog">
用戶名:<input type="text" /><br />
密碼:<input type="text" /><br/>
<input type="button" value="關閉窗口" οnclick="clip_dlg.close();"/>
</div>
<div id="dialog5" class="dialog">
用戶名:<input type="text" /><br />
密碼:<input type="text" /><br/>
<input type="button" value="關閉窗口" οnclick="slide_dlg.close();"/>
</div>
<div id="dialog6" class="dialog">
用戶名:<input type="text" /><br />
密碼:<input type="text" /><br/>
<input type="button" value="關閉窗口" οnclick="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>