`
Starsing
  • 浏览: 5255 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

网页看板娘 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
简单的解释想放在这里了。
分享到:
评论

相关推荐

    看板娘JS 博客看板娘 博客看板娘

    博客看板娘

    看板娘_看板娘waifu_网页看板娘背景_

    总之,"看板娘waifu_网页看板娘背景_"是一个结合了ACGN文化和网页设计的技术话题,涉及到前端开发、动画制作以及用户体验等多个方面。通过巧妙地运用这些技术,可以为网站增添独特的个性化元素,提高用户停留时间和...

    网页看板娘源码以及成品

    网页版伴娘,成品以及源码看板娘是一种职业和习惯称呼,也是ACGN次文化中的萌属性之一。简而言之就是小店的女服务生,也有“吸引顾客,招揽生意,提高人气”等作用类似品牌形象代言人的含义。 如果想在自己的博客上...

    live2d-widget网页看板娘 v0.9.0.zip

    《live2d-widget网页看板娘 v0.9.0》是一个开源项目,主要用于在网页中集成生动的2D动画角色,通常被称为“看板娘”。这个版本是v0.9.0,代表着项目的某个成熟阶段,可能包含了新功能、性能优化或bug修复。在解压后...

    基于VSCode的看板娘模型库

    看板娘模型库可能就是通过这个API来显示动态的看板娘图像或动画。 2. **本地资源交互**:看板娘模型库可能需要读取和存储用户的个性化设置,如看板娘的选择、动作等,这需要用到VSCode提供的本地文件系统接口。 3....

    页面看板娘.zip

    在IT行业中,"页面看板娘"是一种常见的网页动态元素,尤其受到二次元文化爱好者和开发者们的喜爱。它通常指的是那些以2D形式出现在网页上的虚拟助手或形象,能够与用户进行互动,增加网站的趣味性和用户体验。在这个...

    看板娘配置文件.rar

    "看板娘配置文件.rar" 是一个用于设置和管理看板娘功能的压缩包,它包含了一系列让看板娘在网页上生动展示所需的各种配置和资源。看板娘,常见于二次元文化相关的网站或应用中,是一种互动式的虚拟形象,能够与用户...

    小埋模型-网站看板娘

    "小埋模型-网站看板娘"这个项目显然属于二次元文化,是基于干物妹小埋这一动漫角色创建的虚拟形象,适用于个人网站或论坛作为互动看板娘,提升用户体验和增添趣味性。 首先,我们来解析一下提供的压缩包文件名: 1...

    博客看板娘JS和CSS齐备

    博客看板娘,超级好用,

    看板娘软件,能在Windows桌面上生成萌萌哒的看板娘

    看板娘软件是一种创新的桌面应用,专为Windows操作系统设计,旨在为用户的电脑桌面增添趣味性和个性化元素。这种软件的核心功能是在用户的工作环境中创建一个动态的、可爱的虚拟角色,被称为“看板娘”,通常以...

    wordpress+看板娘参考:mjhz.xyz.zip

    1. 实现方式:看板娘的实现通常需要JavaScript和动画技术,如CSS3或WebGL。它们可能通过API与后台数据交互,展示动态内容。 2. 功能扩展:看板娘不仅可以展示静态信息,还可以与其他网站功能结合,如实时天气显示、...

    Live2D看板娘后端资源,给ripro主题加上Live2D看板娘

    给ripro主题加上Live2D看板娘 演示地址:https://25qi.cn/ Live2D资源 帖子地址:...

    live2d-widget网页看板娘源代码

    live2d-widget是一个可以在网页中添加可爱的看板娘的网页插件。 live2d-widget特性: 在网页中添加Live2D看板娘。兼容PJAX,支持无刷新加载。 警告:本项目使用了大量 ES6 语法,不支持 IE 11 等老旧浏览器。 你也...

    自己找到的资源,看板娘源码,小伙子们的福利来了。

    【压缩包子文件的文件名称列表】:“live2d-widget”可能是一个包含Live2D相关组件的库或者框架,它可能包括模型文件(如.cubism)、纹理图像、声音文件、JavaScript代码以及用于控制看板娘行为的配置文件等。...

    live2d-widget网页看板娘 v0.8.2

    live2d-widget是一个可以在网页中添加可爱的看板娘的网页插件。live2d-widget特性在网页中添加Live2D看板娘。兼容PJAX,支持无刷新加载。 警告:本项目使用了大量 ES6 语法,不支持 IE 11 等老旧浏览器。你也可以在...

    基于JavaScript的2D二次元看板娘(Live2D)资源库设计源码

    本项目提供了一套基于JavaScript开发的2D二次元看板娘(Live2D)资源库源码,共计539个文件,涵盖307个mtn文件、110个json文件、51个png文件、44个mp3文件、22个moc文件、2个js文件、2个map文件、1个md文件。...

    桌面看板娘 ppet (附模型)

    "桌面看板娘 ppet"是一款非常受欢迎的二次元虚拟助手软件,它的主要功能是将一个可爱的3D角色(通常称为“看板娘”或“桌面娘”)置于用户的电脑桌面上,为用户提供互动和信息展示服务。看板娘不仅能够增加桌面的...

    hexo-butterfly中加入看板娘

    在本教程中,我们将深入探讨如何在基于Hexo框架的Butterfly主题中添加看板娘,让您的个人博客更具个性化和吸引力。Hexo是一款快速、简洁且高效的静态站点生成器,而Butterfly则是Hexo的一个流行主题,以其优雅的设计...

    nuxt看板娘.zip

    看板娘

    鼠标跟随动画-Live2D看板娘.rar

    很多博客都有live2D的萌萌哒看板娘,手痒,所以整理了一套HTML5可以用的,注释换一下就可以用啦,最好是放到线上服务器上使用。 L2Dwidget.init({ "model": { //萌娘 jsonPath: "model/live2d-shizuku/assets/...

Global site tag (gtag.js) - Google Analytics