看门娘的代码

今天吧代码重新了一下，一共有3个文件，一个php,一个js,一个css。使用了jquery。

js:

jQuery.preloadImages = function(){
  for(var i = 0; i<arguments.length; i++)  {
    jQuery("<img>").attr("src", arguments[i]);
  }
}
jQuery.preloadImages(wizard_baseurl+"/images/speak-bottom-l.png",wizard_baseurl+"/images/speak-bottom-r.png");
function WizardDialogData(b,w,t){
	return {
		show:function(){
			Wizard[b].show(w,t);
		},
		setTimeout:function(func){
			setTimeout(func,t);
		}
	};
}
function WizardBox(b){
	return ({
		box:b,
		text:b.find('div.wizard_text'),
		showing:false,
		mousein:false,
		hide:function(time){
			if(!this.mousein){
				this.showing = false;
				this.text.fadeOut(500);
			}
		},
		show:function(word,time,append){
			if(word){
				var c = this.text.find("div.content")
				append=append?append:Wizard.OVERWRITE_REPLACE;
				if(append==Wizard.OVERWRITE_REPLACE){
					c.attr("innerHTML","<p>"+word+"</p>");
				}else if(append==Wizard.OVERWRITE_APPEND){
					c.attr("innerHTML",c.attr("innerHTML")+"<p>"+word+"</p>");
				}else if(append==Wizard.OVERWRITE_NONE){
					if(!this.showing)c.attr("innerHTML","<p>"+word+"</p>");
				}
			}
			if(this.showing)return;
			this.showing = true;
			this.text.fadeIn(500);
			if(time){
				var _this = this;//avoid "this" refers to something else in inline functions
				setTimeout(function(){_this.hide(time);},time);
			}
		},
		init:function(){
			this.box.hover(function(){this.mousein=true;},function(){this.mousein=false;});
			return this;
		}
	}).init();
}
var Wizard = {
	//Constants:
	OVERWRITE_NONE:1,
	OVERWRITE_APPEND:2,
	OVERWRITE_REPLACE:0,
	
	TIMEOUT_INIFINTY:0,
	//Varibles:
	words_right:[
		"无路赛！无路赛！无路赛！H是不对的！",
		"大小姐我可是价值47，100，000人民币的哦！",
		"你才傲娇，你全家都是傲娇！",
		"再看H小心我和谐你哦！",
	],
	words_left:[
		"好孩子上网要找火狐姐姐哦Nyoron！",
		"Nyoron～绿坝娘你个傲娇抓不到我",
		"用火狐子上网可以不中病毒哦Nyoron！",
		"听说其实绿坝娘是外国人呐Nyoron？",
	],
	load_dialog:[
		WizardDialogData("left" ,"=ω= Nyoron！Welcome back!"      ,3000),
		WizardDialogData("right",">_< 无路赛！无路赛！无路赛！"    ,3000),
		WizardDialogData("left" ,"=_,=你这个蹭的累怎么也在这儿啊？",3000),
		WizardDialogData("right",">_< 你才蹭的累，你全家都蹭的累！",3000),
	],
	//Public Functions:
	ShowDialog:function(data){
		function dialog_itr(d,i){		
			if(i>=d.length)return;
			d[i].setTimeout(function(){
				d[i].show();
				dialog_itr(d,i+1);
			});
		}
		data[0].show();
		dialog_itr(data,1);
	},

	//Reverved Functions:
	init:function(){
		var boxes =	$('div.wizardbox');
		boxes.fadeIn(2000);
		Wizard.left = WizardBox($('div#wizardbox_left'));
		Wizard.right= WizardBox($('div#wizardbox_right'));
		Wizard.left.box.hover(
			function(){Wizard.left.show( Wizard.words_left[Math.floor(Math.random()*Wizard.words_left.length)], Wizard.TIMEOUT_INIFINTY, Wizard.OVERWRITE_NONE);},
			function(){Wizard.left.hide();}
		);
		Wizard.right.box.hover(
			function(){Wizard.right.show( Wizard.words_right[Math.floor(Math.random()*Wizard.words_right.length, Wizard.TIMEOUT_INIFINTY, Wizard.OVERWRITE_NONE)]);},
			function(){Wizard.right.hide();}
		);
		Wizard.ShowDialog(Wizard.load_dialog);
	},

}
$(document).ready(Wizard.init);

css:

div.wizardbox{ position: fixed; bottom: 0px; display: none;}

#wizardbox_left  { left: 0px; }
#wizardbox_right { right: 0px;}

#wizardbox_left  img { float: left; }
#wizardbox_right img { float: right;}

div.wizard_text { display: none; width: 140px;/* height: 60px;*/}
div.wizard_text p{ 
	text-align: left; 
	font-size: 120%; 
	color: #ac550f; 
	padding:0.25em 0.25em 0.5em 0.5em;
}

#wizard_text_left { background-image: url(images/speak-l.png);}
#wizard_text_right{ background-image: url(images/speak-r.png);}

.nifty{ margin: 2px;}
.nifty .content { padding:0 1px;  background:#f1f1f1;}
b.rtop, b.rbottom{ display:block; background-color: transparent}
b.rtop b, b.rbottom b{display:block;height:1px;overflow:hidden; background:#f1f1f1}

b.r1{margin: 0 3px}
b.r2{margin: 0 2px}
b.r3{margin: 0 1px}

div.bl{
	position: relative;
	top: -1px;
	background-image: url(images/speak-bottom-l.png);
	background-position: top center;
	background-repeat:no-repeat;
	height:5px;
}
div.br{
	position: relative;
	top: -1px;
	background-image: url(images/speak-bottom-r.png);
	background-position: top center;
	background-repeat:no-repeat;
	height:5px;
}

b.r2, b.r3, .nifty .content{border-left: 1px solid #adadad;border-right: 1px solid #adadad;}

b.rtop b.r1{height:0px;border-bottom: 1px solid #adadad; background-color: transparent}
b.rbottom b.r1{height:0px;border-bottom: 1px solid #adadad; background-color: transparent}

php:

<div id="wizardbox_left" class="wizardbox" >
	<div class="nifty wizard_text">
		<b class="rtop">
			<b class="r1"></b>
			<b class="r2"></b>
			<b class="r3"></b>
		</b>
		<div class="content"></div>
		<b class="rbottom">
			<b class="r3"></b>
			<b class="r2"></b>
			<b class="r1"></b>
			<div class="bl"></div>
		</b>
	</div> 
	<img src="<?php bloginfo('template_url'); ?>/images/ffmaid-100.png"/>
</div>
<div id="wizardbox_right" class="wizardbox" >
	<div class="nifty wizard_text">
		<b class="rtop">
			<b class="r1"></b>
			<b class="r2"></b>
			<b class="r3"></b>
		</b>
		<div class="content"></div>
		<b class="rbottom">
			<b class="r3"></b>
			<b class="r2"></b>
			<b class="r1"></b>
			<div class="br"></div>
		</b>
	</div> 
	<div></div>
	<img src="<?php bloginfo('template_url'); ?>/images/gbra.png"/>
</div>