/** * 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
简单的解释想放在这里了。
相关推荐
博客看板娘
总之,"看板娘waifu_网页看板娘背景_"是一个结合了ACGN文化和网页设计的技术话题,涉及到前端开发、动画制作以及用户体验等多个方面。通过巧妙地运用这些技术,可以为网站增添独特的个性化元素,提高用户停留时间和...
网页版伴娘,成品以及源码看板娘是一种职业和习惯称呼,也是ACGN次文化中的萌属性之一。简而言之就是小店的女服务生,也有“吸引顾客,招揽生意,提高人气”等作用类似品牌形象代言人的含义。 如果想在自己的博客上...
《live2d-widget网页看板娘 v0.9.0》是一个开源项目,主要用于在网页中集成生动的2D动画角色,通常被称为“看板娘”。这个版本是v0.9.0,代表着项目的某个成熟阶段,可能包含了新功能、性能优化或bug修复。在解压后...
看板娘模型库可能就是通过这个API来显示动态的看板娘图像或动画。 2. **本地资源交互**:看板娘模型库可能需要读取和存储用户的个性化设置,如看板娘的选择、动作等,这需要用到VSCode提供的本地文件系统接口。 3....
在IT行业中,"页面看板娘"是一种常见的网页动态元素,尤其受到二次元文化爱好者和开发者们的喜爱。它通常指的是那些以2D形式出现在网页上的虚拟助手或形象,能够与用户进行互动,增加网站的趣味性和用户体验。在这个...
"看板娘配置文件.rar" 是一个用于设置和管理看板娘功能的压缩包,它包含了一系列让看板娘在网页上生动展示所需的各种配置和资源。看板娘,常见于二次元文化相关的网站或应用中,是一种互动式的虚拟形象,能够与用户...
"小埋模型-网站看板娘"这个项目显然属于二次元文化,是基于干物妹小埋这一动漫角色创建的虚拟形象,适用于个人网站或论坛作为互动看板娘,提升用户体验和增添趣味性。 首先,我们来解析一下提供的压缩包文件名: 1...
博客看板娘,超级好用,
看板娘软件是一种创新的桌面应用,专为Windows操作系统设计,旨在为用户的电脑桌面增添趣味性和个性化元素。这种软件的核心功能是在用户的工作环境中创建一个动态的、可爱的虚拟角色,被称为“看板娘”,通常以...
1. 实现方式:看板娘的实现通常需要JavaScript和动画技术,如CSS3或WebGL。它们可能通过API与后台数据交互,展示动态内容。 2. 功能扩展:看板娘不仅可以展示静态信息,还可以与其他网站功能结合,如实时天气显示、...
给ripro主题加上Live2D看板娘 演示地址:https://25qi.cn/ Live2D资源 帖子地址:...
live2d-widget是一个可以在网页中添加可爱的看板娘的网页插件。 live2d-widget特性: 在网页中添加Live2D看板娘。兼容PJAX,支持无刷新加载。 警告:本项目使用了大量 ES6 语法,不支持 IE 11 等老旧浏览器。 你也...
【压缩包子文件的文件名称列表】:“live2d-widget”可能是一个包含Live2D相关组件的库或者框架,它可能包括模型文件(如.cubism)、纹理图像、声音文件、JavaScript代码以及用于控制看板娘行为的配置文件等。...
live2d-widget是一个可以在网页中添加可爱的看板娘的网页插件。live2d-widget特性在网页中添加Live2D看板娘。兼容PJAX,支持无刷新加载。 警告:本项目使用了大量 ES6 语法,不支持 IE 11 等老旧浏览器。你也可以在...
本项目提供了一套基于JavaScript开发的2D二次元看板娘(Live2D)资源库源码,共计539个文件,涵盖307个mtn文件、110个json文件、51个png文件、44个mp3文件、22个moc文件、2个js文件、2个map文件、1个md文件。...
"桌面看板娘 ppet"是一款非常受欢迎的二次元虚拟助手软件,它的主要功能是将一个可爱的3D角色(通常称为“看板娘”或“桌面娘”)置于用户的电脑桌面上,为用户提供互动和信息展示服务。看板娘不仅能够增加桌面的...
在本教程中,我们将深入探讨如何在基于Hexo框架的Butterfly主题中添加看板娘,让您的个人博客更具个性化和吸引力。Hexo是一款快速、简洁且高效的静态站点生成器,而Butterfly则是Hexo的一个流行主题,以其优雅的设计...
看板娘
很多博客都有live2D的萌萌哒看板娘,手痒,所以整理了一套HTML5可以用的,注释换一下就可以用啦,最好是放到线上服务器上使用。 L2Dwidget.init({ "model": { //萌娘 jsonPath: "model/live2d-shizuku/assets/...