网页看板娘 js版(论坛娘、博客娘。总之就是梦娘 V (-1) 代码

/**
 * ukagaka.js
 * @author Star
 */
 if(typeof(Kangbang) == 'undefined')
     var Kangbang = {};
     var Ukagaka = null;
	 Kangbang.ukagaka = function(){
	 	this.msgList = []; //可用的消息列表
		this.shellList = [];//可用的shell列表
		this.msgIndex = 0; //当前消息索引
		this.shellIndex = 0;//当前shell索引
		this.ghostName = "";//当前人格名称
		this.msgBox = ""; // 语言输出位置，默认为div
		this.shell = "";  // 默认的ukagaka图像显示位置，默认为img元素
		this.config = ""; // ukagaka的配置信息，使用 HashTable初始化
		this.somagicShell = "";
		this.somagicMsg = "";
		this.somagicMsgBox = "";
		this.timer = null;
		this.timerFlag = false;
	 };
	 
	 Kangbang.ukagaka.prototype = {
	 	
		setGhostName : function( name){this.ghostName = name; },
		getGhostName : function(){ return this.ghostName; },
		setMsgList : function(msgs){ this.msgList = msgs; },
		setShellList : function(shells){ this.shellList = shells; },
        setShell : function(img){this.shell = img; },
		setMsgBox : function(div){this.msgBox = div; },
		setSomagicShell : function(div){ this.somagicShell = div; },
		setSomagicMsgBox : function(div){ this.somagicMsgBox = div;	}, // 整个对话框
		setSomagicMsg : function(div){ this.somagicMsg = div; },    //显示对话的部分
		getConfig : function(){	return this.config;	},
		
		hiddenSomagicMsgBox : function(){ Kit.hidden(this.somagicMsgBox);},
		showSomagicMsgBox : function(){Kit.show(this.somagicMsgBox); this.showSomagic();},
		hiddenSomagic : function(){ Kit.hidden(this.somagicShell);  /*this.hiddenSomagicMsgBox()*/},
		showSomagic  : function(){Kit.show(this.somagicShell);},
		stopTimer : function(){ if(this.timer ==null) return ;this.timerFlag = false;clearTimeout(this.timer)},
		
		setConfig : function(cfg){  // 后台取得服务器配置文件之后调用
			this.config = cfg;	
			this.shellList = cfg.get("#shell").split(",");
			this.msgList = cfg.get("#msg").split("\\w");
			this.ghostName = cfg.get("#ghost");
			this.createCode();
		},
		createCode : function(){  // 动态创建js属性或方法
			var codes = this.config.get("#jsCode").split("\[code\]");
			for (var i = 0; i < codes.length; i++) {
				//alert(codes[i]);
				eval(codes[i]);
			}
			
		},
		init : function(){    //前台页面加载完成后调用，sonotori，前台个很据自己情况手动控制
			//this.showMenu();
//			this.hello = function(){
//		 	alert("Hello!");
//		 };
		},
		showMenu : function(){  // 显示系统菜单，显示位置为对话框
		    //alert(this.config.get("#menu"));
			this.stopTimer();
			this.msgBox.innerHTML = this.config.get("#menu");
		},
		sayNext  : function(){ //简单的按照顺序显示下一列对话。 用于自我吐槽
			if(this.msgIndex >= this.msgList.length) this.msgIndex = 0;
			this.msgBox.innerHTML = this.msgList[this.msgIndex ++].split("\\c")[0];
			Kit.element("outPutDialog").innerHTML = this.msgBox.innerHTML + "<br/>";
		},
		sayToIndex : function(index){ // 控制吐槽顺序
			if(index > this.msgList.length) index = this.msgList.length;
			if(index < 0) index = 0;
			this.msgBox.innerHTML = this.msgList[index].split("\\s")[0];
		},
		
		shellNext : function(){ // 按照外壳顺序切换外形
			if(this.shellIndex >= this.shellList.length) this.shellIndex = 0;
			this.shell.src = this.shellList[this.shellIndex ++];
		},
		shellToIndex : function(index){ //控制外壳显示顺序
			if(index > this.shellList.length) index = this.shellList.length;
			if(index < 0) index = 0;
			this.shell.src = this.shellList[index];
		},
		shellOnce : function(index /* */ , time /* */){ //控制显示顺序并在time之后恢复默认
			this.shellToIndex(index);
			setTimeout(function(){Ukagaka.shellToIndex(0);} , time);
		},
		tsukkomi : function(){    //自己吐
			if(this.msgList.length <= 0) return;
			this.sayNext();
			this.timer = setTimeout(function(){Ukagaka.tsukkomi();} , 10 * 1000);
		},
		tsukkomiSomagic : function(){   // 一起吐
			if(this.msgList.length <= 0) return;
			if(this.msgIndex >= this.msgList.length) this.msgIndex = 0;
			this.timer = setTimeout(function(){Ukagaka.tsukkomiSomagic();} , 10 * 1000);
			var arr = this.msgList[this.msgIndex ++ ].split("\\c");
			this.msgBox.innerHTML = arr[0];
			this.somagicMsg.innerHTML = arr[1];
		}
	 };
(function(){
	Ukagaka = new Kangbang.ukagaka();
	var ajax = new Ajax();
	var hashMap = new Kit.HashTable();  // 从服务器上读取配置文件，这样应该就牛13了，完全独立出来了
	var response = ajax.getServerRequest("http://127.0.0.1:8000/ukagaka/cfg/ukagak.cfg").split("[end]");
	for(var line in response){ //这个设计我表示无语，循环所得的是下标
		var arr = response[line].split("=");
//		if(arr.length <= 0) continue;
		var value = "";
		for(var i = 1 ; i < arr.length ; i ++){
			value += arr[i] + (i < arr.length - 1 ? "=" : ""); 
		}
		hashMap.put(arr[0].replace("\r\n" , "") , value);
	}
	Ukagaka.setConfig(hashMap);
})();

/**
 * Toolkit.js
 * three object canuse 
 * @author Star
 */

if(typeof(Kit) == 'undefined')
    var Kit = {};
	Kit.element = function(elementId){
		return document.getElementById(elementId);
	};
	Kit.isElement = function(elementId){
		return typeof(elementId) == "object";
	}
	Kit.hidden = function(elementId){
		if (Kit.isElement(elementId)) {
			elementId.style.display = "none";
		}else {
			Kit.element(elementId).style.display = "none";
		}
	};
	Kit.show = function(elementId){
		if (Kit.isElement(elementId)) {
			elementId.style.display = "";
		}else {
			Kit.element(elementId).style.display = "";
		}
	};
	Kit.isShow = function(elementId){
		return Kit.isElement(elementId) ? elementId.style.display.toLowerCase()!= "none" :
		                                     Kit.element(elementId).style.display.toLowerCase() != "none" ;
	};
	Kit.HashTable = function(){
			this.keys = [];
			this.values = [];
	};
	Kit.HashTable.prototype = /*(function()*/{
//		return {
		getLength : function(){  return this.keys.length; },
				  
		clear    :  function(){ this.keys = [];this.values = []; },
				  
		keys    : function(){ return this.keys; },
					
		values  : function(){ return this.values; },
		/**
		 * 
		 * @param {Object} key
		 * @param {Object} value
		 */
	    put      : function(key , value){
			    if(this.containsKey(key)) return false;
				this.keys.push(key);
				this.values.push(value);
				return true;
			    },
		/**
		 * 
		 * @param {Object} key
		 * @param {Object} value
		 */
		set     : function(key , value){
		       for(var i = 0 ; i < this.getLength() ; i ++){
					if (this.keys[i] == key) {
						this.values[i] = value;
						return true;
					}
				}
				return false;
	          },
	    /**
	     * 
	     * @param {Object} key
	     */
	    get    : function(key){
				for(var i = 0 ; i < this.getLength() ; i ++){
					if(this.keys[i] == key) return this.values[i];
				}
				return null;
			   },
		/**
		 * 
		 * @param {Object} key
		 */
		remove   :  function(key){
		          for(var i = 0 ; i < this.getLength() ; i ++){
				  	if(this.keys[i] == key){
						this.keys.removeIndex(i);
						this.values.removeIndex(i);
						return;
					}
				  }
	         },
		/**
		 * 
		 * @param {Object} key
		 * 
		 */
	    containsKey : function(key){
			      for(var i = 0 ; i < this.getLength() ; i ++){
				  	if(this.keys[i] == key) return true;
				  } return false;
		    },
		/**
		 * 
		 * @param {Object} value
		 */
		containsValue  : function(value){
				for(var i = 0 ; i < this.getLength() ; i ++){
					  	if(this.values[i] == value) return true;
					  } return false;
		}
		// }
	};//)();
	Kit.Time = {
		onTime : function(fn ,time){
			setTimeout(fn , time);
		}
	};
 if(typeof(Browser) == 'undefined')
    var Browser = {};
	
	Browser.Layout = {};
	
	Browser.Type = {
		 /**
		  * borwer type main type like ie or firefox and so on
		  */
		borwerType : " ",
		/**
		 * quick know the borwer type
		 */
		isIE : function(){
			    return Browser.Type.borwerType.toLowerCase() == "ie" ? true : false;
		      } ,
		/**
		 * borwer version list
		 */
		borwerVersion : "",
		
		agentString : ""
    };
	
	
	
	/**
	 * Oh my god , the method is great but I think It`s error .
	 * If the brow is not 'IE 6' the method id bad so the method only to
	 * use 'IE 6' to support position fixd attribute but FireFox or Op.....
	 * so you can use css file ? js file can use to load css file but please
	 * not use js to create css , It`s so hard to read.
	 */
	Browser.Layout.FixedPosition = {
		inited     : false,
		/**
		 * 
		 * @param {Object} element
		 * @param {Object} top
		 * @param {Object} left
		 */
		setPosition : function(element, top, left){
                        element.style.display = "block";
					    if (Browser.Type.isIE()) {
					        element.style.position = "absolute";
					        Browser.Layout.FixedPosition.setGlobal();
					    }else {
					        element.style.position = "fixed";
					    }
					    element.style.top = top + "px";
					    element.style.left = left + "px";
					},
		/**
		 * add css attribute key and value to document
		 * @param {Object} key
		 * @param {Object} value
		 */
		addCSSRule : function(key, value){
					    var css = document.styleSheets[document.styleSheets.length - 1];
					    css.cssRules ? (css.insertRule(key + "{" + value + "}", css.cssRules.length)) : (css.addRule(key, value));
					    },
		/**
		 * 
		 */
		setGlobal  :  function(){
					    if (!Browser.Layout.FixedPosition.inited) {
					        document.body.style.height = "100%";
					        document.body.style.overflow = "auto";
					        Browser.Layout.FixedPosition.addCSSRule("*html", "overflow-x:auto;overflow-y:hidden;");
					        Browser.Layout.FixedPosition.inited = true;
					    }
                      }
	};
	/**
	 * init var on page load
	 */
	(function(){
		Browser.Type.agentString = navigator.userAgent;
		var bowerStr = Browser.Type.agentString.toLowerCase();
		if(bowerStr.indexOf("msie") > -1){
			Browser.Type.borwerType = "ie";
			if(bowerStr.indexOf("msie 6") > -1){
				Browser.Type.borwerVersion = "IE 6";
			}else if(bowerStr.indexOf("msie 7") > -1){
				Browser.Type.borwerVersion = "IE 7";
			}else{
				Browser.Type.borwerVersion = "nani";
			}
		}else{
			Browser.Type.borwerType = "FireFox";
		}
	})();

if(typeof(Ajax) == 'undefined')
    var Ajax = function(){
		this.request = null;
	};
	Ajax.prototype = {
		
		createRequest : function(){
			var request = false;
				var ms = ['Msxml2.XMLHTTP.5.0','Msxml2.XMLHTTP.4.0','Msxml2.XMLHTTP.3.0','Msxml2.XMLHTTP','Microsoft.XMLHTTP'];
				if(window.XMLHttpRequest){
					return new XMLHttpRequest();
				}else if(window.ActiveXObject){
					for(var i = 0 ; i < ms.length ; i ++ ){
						try{
							request = new ActiveXObject(ms[i]);
							return request;
						}catch(e){
							continue;
						}
					}
				}
				return false;
		},
		
		getServerRequest : function(url){
			this.request = this.createRequest();
			this.request.open("get" , url ,false);
//				if(this.request.overrideMimeType)
//				   this.request.overrideMimeType('text/json; charset=utf-8');
				this.request.setRequestHeader("cache-control","no-cache");
				this.request.setRequestHeader('Accept-Charset','utf-8');
                this.request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
				this.request.send();
				if(this.request.readyState==4&&this.request.status==200) return this.request.responseText;
                else return "";
		}
	};
	

body{
	font-family:"Lucida Grande",Arial,Helvetica,Verdana,sans-serif;
	font-size:12px;
	line-height:150%;
}
 /**
  * 整个工程的最外层
  */
#mp_kobato{
	margin:0;
    padding:0;
}
/**
 * 内层，包含看板和看板整体的控制选项
 */
#kanggang_shell{
	bottom:0;
	display:block;
	float:right;
	font-size:12px;
	margin:0 20px 0 0;
	padding:0;
	position:fixed;
	right:0;
	z-index:501;
}
/**
 * 看板娘实体，其中包含看板娘和对话框
 */
#kobato{
	
	float:right;
	padding-right:10px;
	position:relative;
}
#somagic{
	top : 140px;
	float:right;
	padding-right:250px;
	position:relative;
}
/**
 * padding top right buttom left
 */
#somagic_msgBox{
	position:absolute;
	float:left;
	padding:5px 5px 10px 0;
	top : -10px;
	left :80px;
	width : 230px;
	height : 60px;
	background-color:#808080;
	background : transparent url("/imgs/somagciballoon.png" ) no-repeat scroll right top;
}
#somagic_msg{
	margin : 0 10px 10px 20px ;
	color : #FFFFFF;
}
/**
 * 看板的控制选项
 */
#kobato_dock{
	background-color:#FFFFFF;
	float:right;
	padding:5px 10px;
	text-align:center;
	-moz-border-radius-topleft:8px;
	-moz-border-radius-topright:8px;

}
/**
 * 	color:#FFFFFF;
 */
#kobato_msgBox{

    margin:0;
    padding:10px 20px;
	left:-320px;
	height : 100px;
	position:absolute;
	top:5px;
	height : 90px;
	width:295px;
	background : transparent url("/imgs/balloon.png" ) no-repeat scroll right top;

}
#kobato_msgBox #menu{
	margin:0;
	top : -5px;
	right : 20px;
	position:absolute;
	cursor : pointer;
}
/**
 * background-color:#808080;
 * 	border-style:solid solid none;
 * 	-moz-border-radius:5px 5px 5px 5px;
 * cursor : pointer;
 */
#kobato_msg{
	
    color:#FFFFFF;
    margin:0;
	padding:0;
	 
}
#kobato_msg ul{
	margin:0;
	padding:0;
	list-style:none outside none;
}
#kobato_msg li{
	float:left;
    width:33%;
}
#kobato_msg a{
	cursor : pointer;
}

<div id="mp_kobato">
				<div id="kanggang_shell">
					<div id="kobato">
						<div id="kobato_msgBox">
							<div id="menu" onclick="Ukagaka.showMenu();"><img src="imgs/menu.gif"/></div>
							<div id="kobato_msg" >欢迎光临</div>
						</div>
					     <div id="kobato_bg"  onclick="Ukagaka.shellNext();" >
						      <img id="kobato_shell" src="imgs/1.gif" title="kobato" width="200px" height="242px"/>
					     </div>
					</div>
					<div id="somagic" >
						<div id="somagic_msgBox">
							<div id="somagic_msg">tobato</div>
						</div><!--style="display:none;"-->
						<div id="somagic_bg"   >
							<img id="somagic_shell" src="imgs/7.gif" width="90px" height="100px"/>
						</div>
                    </div>
				 <div id="kobato_dock"></div>
				</div>
			</div>
			  <script language="JavaScript" type="text/javascript" >
			    (function(){
					Ukagaka.setShell(Kit.element("kobato_shell"));
					Ukagaka.setMsgBox(Kit.element("kobato_msg"));
					Ukagaka.setSomagicShell(Kit.element("somagic"));
					Ukagaka.setSomagicMsgBox(Kit.element("somagic_msgBox"));
					Ukagaka.setSomagicMsg(Kit.element("somagic_msg"));
					Ukagaka.init();
					
					Ukagaka.tsukkomiSomagic();
				})();
		</script>     

没想到这里也很不方便，总之解释先放hi了，看情况再写一个完整的解释。
http://hi.baidu.com/starsecond/blog/item/c3c63bf5d16399e37709d724.html
简单的解释想放在这里了。