最近写五子棋,写着写着,写了几个js特效,感觉还行,发出来分享一下。具体还在调试,如果有alert弹窗部分,大家自己找一下取消掉。我记得缩放的四个边角红色背景色没有去掉,嫌碍事的可以把“background:red;”改为“background:transparent;”即可。有小瑕疵的话,有动手能力的可以自行调试改正。
A. 拖拽部分 ——– 《changer.js》:
var chger_Browser,chger_Stys;
// 判断浏览器
function chger_GetBrowser(){
if(!!window.ActiveXObject || "ActiveXObject" in window){
return "IE";
}else{
var t=window.navigator.userAgent;
var a=["Opera","FireFox","Chrome","Safari"];
for(var i=0;i<a.length;i++){if(t.indexOf(a[i])+1){return a[i];};};
};
}; /* INIT Borwser Name-------> */ chger_Browser=chger_GetBrowser();
//返回HTML元素对象
function chger_ReturnHtmlElm(o){
var t=null;
if(typeof(o)=="object"&&o.nodeType==1){
return o;
}else if(typeof(o)=="string"&&!!(t=document.getElementById(o))){
return t;
}else{return false;};
};
//绑定事件 与 stopBubble 等
function chger_AddEvents(o,e,f){ o.attachEvent?o.attachEvent("on"+e,f):o.addEventListener(e,f); };
function chger_RemoveEvents(o,e,f){ o.removeEventListener?o.removeEventListener(e,f):o.detachEvent("on"+e,f); };
function chger_StopEvents(e){e&&e.preventDefault?e.preventDefault():window.event.returnValue=false;}
function chger_StopBubble(e){e&&e.stopPropagation?e.stopPropagation():window.cancelBubble=true;};
//样式操作修改 和 获取
function chger_CssFunction(){
function ieGet(o,a){ return o.currentStyle[a]; };
function imIeGet(o,a){ return window.getComputedStyle(o,null)[a]; };
this.get=("IE" == chger_Browser?ieGet:imIeGet);
this.set=function(o,s){
if(!o||!s|| typeof(s)!="string"){return false};
s=s.replace(/(\;$)|(^\;)/g,"").split(";");
this.sty=[]; this.o=null;
if(typeof(o.length)=="undefined"){ o=[o]; };
for(var i=0;i<s.length;i++){
this.sty.push([s[i].slice(0,s[i].indexOf(":")),s[i].slice(s[i].indexOf(":")+1,s[i].length)]);
};
for(var i=0;i<o.length;i++){
this.o=chger_ReturnHtmlElm(o[i]);
if(!!this.o){ for(var k=0;k<this.sty.length;k++){ this.o.style[this.sty[k][0]]=this.sty[k][1]; }; };
};
};
}; /* INIT cssFunction -------> */ chger_Stys=new chger_CssFunction();
// A 透明度改变
function chger_Opacity(o,v){
if("IE" == chger_Browser){
o.style.filter="alpha(Opacity:"+parseInt(v)+")";
}else{o.style.opacity=parseInt(v*100)/100;};
};
// B 大小改变
function chger_Position(w,h){
o.style.width=w+"px";
o.style.height=h+"px";
};
// B-1 createElement
function chger_CretE(t,ids){
var elm=document.createElement(t); elm.setAttribute("id",ids); return elm;
};
// C 移动
function chger_Mover(o,box,run,show,create){
//【o】:一个移动对象(与chger_Drager配合使用) 【box】:对象的边框,移动不能超出这个边框 【run】:绑定一个运行对象,为一个function对象 【show】:设置true为移动边框,设置false为移动本体,无边框 【create】:无需理会,与new过程有关,外部调用不需要new语句。
if(!chger_ReturnHtmlElm(o)){return null;};
if(!create){return new chger_Mover(o,box,run,show,true);};
this.objer={}; this.boxer={}; this.show=show;
if(typeof(run)=="function"){ this.go=run; }else{this.go=false;};
this.objer.elm=chger_ReturnHtmlElm(o); this.boxer.elm=chger_ReturnHtmlElm(box);
if(!this.boxer.elm){this.boxer.elm=document.body;};
if("static" == chger_Stys.get(this.boxer.elm,"position")){chger_Stys.set(this.boxer.elm,"position:relative;left:0;top:0;");};
if("static" == chger_Stys.get(this.objer.elm,"position")){chger_Stys.set(this.objer.elm,"position:absolute;left:0;top:0;");};
this.objer.width=this.objer.elm.offsetWidth; this.objer.height=this.objer.elm.offsetHeight;
this.boxer.width=this.boxer.elm.offsetWidth; this.boxer.height=this.boxer.elm.offsetHeight;
this.R=this.boxer.width-this.objer.width; this.B=this.boxer.height-this.objer.height;
this.objer.zIndex=parseInt(chger_Stys.get(this.objer.elm,"z-index"));
if(!!this.show){
this.mover=chger_CretE("div","id"+new Date().getTime());
this.objer.elm.parentNode.appendChild(this.mover);
this.mover.style.position="absolute";
this.mover.style.background="transparent";
this.mover.style.width=chger_Stys.get(this.objer.elm,"width");
this.mover.style.height=chger_Stys.get(this.objer.elm,"height");
this.mover.style.left=chger_Stys.get(this.objer.elm,"left");
this.mover.style.top=chger_Stys.get(this.objer.elm,"top");
}else{this.mover=this.objer.elm;};
this.X=this.objer.elm.offsetLeft; this.Y=this.objer.elm.offsetTop;
this.Move=function(x,y){
this.X=(x<0?0:(x>this.R?(this.R<0?0:this.R):x));
this.Y=(y<0?0:(y>this.B?(this.B<0?0:this.B):y));
this.mover.style.left=this.X+"px";
this.mover.style.top=this.Y+"px";
if(this.go){this.go(x,y);};
};
};
// D 拖拽
function chger_Drager(o,m,bd,create){
//【o】:拖拽触发的对象,注意,不是指拖拽移动的对象 【m】:为一个移动对象,由chger_Mover对象new出来的 【bd】:设置true为不修改边框(不需激活,直接拖拽),为空或设置false为需要激活(激活时边框变为红色) 【create】:无需理会,与new过程有关,外部调用不需要new语句。
if(!chger_ReturnHtmlElm(o)){return null;};
if(!create){return new chger_Drager(o,m,bd,true);};
if(!m||!m.objer||!m.objer.width){ this.oMove=chger_Mover(o,document.body); }else{this.oMove=m;};
this.objer={}; this.bd=bd;
this.objer.elm=chger_ReturnHtmlElm(o);
this.objer.bdwidth=chger_Stys.get(this.objer.elm,"border-width").toString();
this.objer.bdstyle=chger_Stys.get(this.objer.elm,"border-style");
this.objer.bdcolor=chger_Stys.get(this.objer.elm,"border-color");
if(this.objer.bdstyle=="none"){this.objer.bdstyle="solid";};
if(this.objer.bdwidth.search(/[0-9]{1,3}px/)){ this.objer.bdwidth="0px"; };
if("0px"==this.objer.bdwidth && this.bd){this.objer.bdwidth="1px";};
this.closeTim=function(){
if(this.moving){
chger_RemoveEvents(document,"mousemove",this.mousemove.bind(this));
chger_RemoveEvents(document,"mouseup",this.mouseup.bind(this));
this.moving=false;
};
this.objer.elm.style.borderWidth=this.objer.bdwidth;
this.objer.elm.style.borderColor=this.objer.bdcolor;
this.objer.elm.style.borderStyle=this.objer.bdstyle;
if(this.bd)this.ready=false;
};this.closeTim();
this.press=this.objer.elm.offsetWidth-this.oMove.objer.width;
this.oMove.R -= this.press; this.oMove.B -= this.press;
if(!!this.oMove.show){
this.oMove.mover.style.borderWidth=this.objer.bdwidth;
this.oMove.mover.style.borderColor=this.objer.bdcolor;
this.oMove.mover.style.borderStyle=this.objer.bdstyle;
};
this.choose=function(e){
chger_StopEvents(e);chger_StopBubble(e);
if(!this.bd){return false;};
if(!this.ready){
chger_AddEvents(this.objer.elm,"mousedown",this.mousedown.bind(this));
this.ready=true;
this.objer.elm.style.borderWidth=this.objer.bdwidth;
this.objer.elm.style.borderColor="red";
this.objer.elm.style.borderStyle=this.objer.bdstyle;
this.timer=setTimeout(this.closeTim.bind(this),5000);
}else{
chger_RemoveEvents(this.objer.elm,"mousedown",this.mousedown.bind(this));
this.ready=false; this.closeTim();
};
};
this.mousedown=function(e){
chger_StopEvents(e);chger_StopBubble(e);
if(this.ready){
this.CX=e.clientX-this.oMove.objer.elm.offsetLeft; this.CY=e.clientY-this.oMove.objer.elm.offsetTop;
chger_AddEvents(document,"mousemove",this.mousemove.bind(this));
chger_AddEvents(document,"mouseup",this.mouseup.bind(this));
this.moving=true;
if(this.timer){ clearInterval(this.timer); };
if(!!this.oMove.show){this.oMove.mover.style.zIndex=this.oMove.objer.zIndex+1;};
};
};
this.mouseup=function(e){
chger_StopEvents(e);chger_StopBubble(e);
if(this.moving){
chger_RemoveEvents(document,"mousemove",this.mousemove.bind(this));
chger_RemoveEvents(document,"mouseup",this.mouseup.bind(this));
this.moving=false;
if(this.bd){ this.timer=setTimeout(this.closeTim.bind(this),5000); };
if(!!this.oMove.show){
this.oMove.objer.elm.style.left=this.oMove.X+"px";
this.oMove.objer.elm.style.top=this.oMove.Y+"px";
this.oMove.mover.style.zIndex=this.oMove.objer.zIndex-1;
};
};
};
this.mousemove=function(e){
chger_StopEvents(e);chger_StopBubble(e);
if(this.moving){
this.oMove.Move(e.clientX-this.CX,e.clientY-this.CY);
};
};
if("absolute" != chger_Stys.get(this.objer.elm,"position")){return false;};
if(!this.bd){
chger_AddEvents(this.objer.elm,"mousedown",this.mousedown.bind(this));
this.ready=true;
}else{
chger_AddEvents(this.objer.elm,"dblclick",this.choose.bind(this));
};
};
// E 缩放
function chger_Resizer(o,create){
//【o】:拖拽触发的对象,注意,不是指拖拽移动的对象 【m】:为一个移动对象,由chger_Mover对象new出来的 【bd】:设置true为不修改边框(不需激活,直接拖拽),为空或设置false为需要激活(激活时边框变为红色) 【create】:无需理会,与new过程有关,外部调用不需要new语句。
if(!chger_ReturnHtmlElm(o)){return null;};
if(!create){return new chger_Resizer(o,true);};
this.objer={};
this.objer.elm=chger_ReturnHtmlElm(o);
this.objer.width=this.objer.elm.offsetWidth; this.objer.height=this.objer.elm.offsetHeight;
this.objer.left=this.objer.elm.offsetLeft; this.objer.top=this.objer.elm.offsetTop;
this.X=this.objer.left; this.Y=this.objer.top;
this.W=this.objer.width; this.H=this.objer.height;
this.Directer=[true,true,true,true];
this.D=[]; this.I=[]; this.type=false;
this.TL=false; this.TR=false; this.BL=false; this.BR=false;
this.objer.elm.style.overflow="hidden";
this.resize=function(X,Y){
this.W=this.CW+X*this.D[2]; this.H=this.CH+Y*this.D[3];
if(this.W<20){this.W=20;}else{this.X=this.CX+X*this.D[0];};
if(this.H<20){this.H=20;}else{this.Y=this.CY+Y*this.D[1];};
if(this.position){
this.objer.elm.style.left=this.X+"px"; this.objer.elm.style.top=this.Y+"px";
};
this.objer.elm.style.width=this.W+"px";
this.objer.elm.style.height=this.H+"px";
if(1 == this.type){};
};
this.mousedown=function(e){
chger_StopEvents(e);chger_StopBubble(e);
if(!this.type){return false;};
this.CW=this.W; this.CH=this.H;
this.CX=this.objer.elm.offsetLeft; this.CY=this.objer.elm.offsetTop;
this.RX=e.clientX; this.RY=e.clientY;
//this.CX=this.RX-this.X; this.CY=this.RY-this.Y;
chger_AddEvents(document,"mousemove",this.mousemove.bind(this));
chger_AddEvents(document,"mouseup",this.mouseup.bind(this));
this.moving=true;
};
this.mousemove=function(e){
chger_StopEvents(e);chger_StopBubble(e);
if(!this.moving){return false;};
this.resize(e.clientX-this.RX,e.clientY-this.RY);
};
this.mouseup=function(e){
chger_StopEvents(e);chger_StopBubble(e);
if(this.type){
chger_RemoveEvents(document,"mousemove",this.mousemove.bind(this));
chger_RemoveEvents(document,"mouseup",this.mouseup.bind(this));
this.type=false; this.moving=false; this.D=[0,0];
};
};
for(var i=0;i<4;i++){
if(!this.Directer[i]){continue;};
this.objer.elm.appendChild(chger_CretE("div",this.objer.elm.id+"_set"+i));
chger_Stys.set($E(this.objer.elm.id+"_set"+i),"position:absolute;background:red;width:10px;height:10px;cursor:crosshair;");
};
if("absolute" != chger_Stys.get(this.objer.elm,"position") && "relative" != chger_Stys.get(this.objer.elm,"position")){chger_Stys.set(this.objer.elm,"position:relative;");};
if("absolute" != chger_Stys.get(this.objer.elm,"position")){this.position=false;}else{this.position=true;};
//绑定指定方位触发器-----下
if(this.Directer[0]){this.TL=$E(this.objer.elm.id+"_set"+0); chger_Stys.set(this.TL,"top:-5px;left:-5px;"); chger_AddEvents(this.TL,"mousedown",function(){this.type="TL";this.D=[1,1,-1,-1]}.bind(this));};
if(this.Directer[1]){this.TR=$E(this.objer.elm.id+"_set"+1); chger_Stys.set(this.TR,"top:-5px;right:-5px;"); chger_AddEvents(this.TR,"mousedown",function(){this.type="TR";this.D=[0,1,1,-1]}.bind(this));};
if(this.Directer[2]){this.BR=$E(this.objer.elm.id+"_set"+2); chger_Stys.set(this.BR,"bottom:-5px;right:-5px;"); chger_AddEvents(this.BR,"mousedown",function(){this.type="BR";this.D=[0,0,1,1]}.bind(this));};
if(this.Directer[3]){this.BL=$E(this.objer.elm.id+"_set"+3); chger_Stys.set(this.BL,"bottom:-5px;left:-5px;"); chger_AddEvents(this.BL,"mousedown",function(){this.type="BL";this.D=[1,0,-1,1]}.bind(this));};
chger_AddEvents(this.objer.elm,"mousedown",this.mousedown.bind(this));
};
B. 五子棋函数 ——– 《freeFunction.html》(在IE下可使用fso,非IE下使用cookie或storage实现保存):
function Proton(n,len){
n=n.toString(); var a=[]; a[len-n.length]=n; return a.join("0");
};
function parseTime(n){
n=parseInt(n);
if(n<=0){return "00:00:00";};
return (Proton(parseInt(n/60),2)+":"+Proton(n%60,2));
};
function FREEFunction(src){
var BigSrc=false,Ftime=new Date().getTime();
var bc="backgroundColor",contraryNUM=[1,0];
var namesArr=["张三丰","李世民","黄蓉","杨过"];
if(fsoTF){if(!ExistsFolder(src)){fsoTF=false;}else{BigSrc=src;};}; // init BigSrc *******************----------------
// *********** open or cret init area -------------------------
var srcGuest="Guests",gn="/",Txt=".txt";
var guestsLength=10,deskLength=3;
// *********************** write json area ----------------------------
this.saveRoom=function(R){ R=(R||oSelf.on); cretF(BigSrc+R+gn+"oRoom"+Txt,JSON.stringify(oRoom)); };
this.saveSelf=function(){ oRoom.time=Ftime; cretF(BigSrc+this.name+Txt,JSON.stringify(oSelf)); };
// *********************** open json area -----------------
this.openJSON=function(src){var t=openF(src); try{ if(t && typeof(t=JSON.parse(t))=="object"){return t;}else{return {};}; }catch(e){return {};}; };
//************* open oRoom && oSelf area-----------
this.openRoom=function(R){ return this.openJSON(BigSrc+R+gn+"oRoom"+Txt); };
this.openSelf=function(Pip){ return this.openJSON(BigSrc+Pip+Txt); };
// ************* open guests area ---------------
this.addGuest=function(R){ if(this.getGuests(R).length<guestsLength){cretF(BigSrc+R+gn+srcGuest+gn+this.name+Txt, new Date().getTime()); return true;}else{return false;}; };
this.outGuest=function(R){ deleteFile(BigSrc+R+gn+srcGuest+gn+this.name+Txt); if(this.getGuests(R).length==0){ deleteFolder(BigSrc+oSelf.on); }; };
//* *************** getGuestlength area -----------------
this.getGuests=function(R){var t=[]; var f=fso.getFolder(BigSrc+R+gn+srcGuest),d; d=new Enumerator(f.Files); for(;!d.atEnd();d.moveNext()){ t.push(d.item().name); }; return t; };
var xyLen=0,PA="player1",PB="player2",PAB={}; PAB[PA]=PB;PAB[PB]=PA;
var white="white",black="black",box=[],childrens=[],useRand=-1,onClosing=false;
var oSelf={},oRoom={},json={};
var InRoomTim=0,OutRoomTim=0;
oSelf={Role:{},active:Ftime,on:false,goTiming:PA};
oRoom={player1:false,player2:false,ready:{},onGame:false,frees:[],setTimes:300,gameTime:{},inTime:{},rand:0};
for(var i=0;i<namesArr.length;i++){
var t=this.openSelf(namesArr[i]);
if(!t.active||t.active<(new Date().getTime()-10000)){
this.name=namesArr[i]; oSelf.active=new Date().getTime(); this.saveSelf();
$E("freeBnr3").innerHTML=this.name; break;
};
};
// player area ****************************************
this.CretOrOutRoom=function(){
if(!this.name){return ;};
if(oSelf.on){
//提示区域 可有可无******************↓
if(oSelf.Role.A){
if(oRoom.onGame&&!window.confirm("你正在进行下子,确定退出房间?")){
return false;
}else if(!oRoom.onGame&&!window.confirm("你已入座,确定退出房间?")){
return false;
};
};
//提示区域 可有可无******************↑
this.A_Guest(oSelf.on);
}else{
var t;
for(var i=0;i<deskLength;i++){
t=(i+1)+"桌";if(!ExistsFolder(BigSrc+t)){
cretFD(BigSrc+t); cretFD(BigSrc+t+gn+srcGuest); this.saveRoom(t);
this.A_Guest(t); this.B_Player(PA); break;
};
};
};
};
this.A_Guest=function(R,typ){
if(!this.name||(!ExistsFolder(BigSrc+R))){return false;};
if(oSelf.on){
if(!onClosing && this.onGame){alert("A_Guest:is gaming!");return false;};
if(oSelf.Role.A){ this.B_Player(oSelf.Role.A); };
this.outGuest(oSelf.on); oSelf.on=false; oSelf.Role={}; this.saveSelf();
$E("freeBnr1").innerHTML="创建房间"; $E("freeBnr1").style[bc]="#777";
$E("freeMsg0").innerHTML="房间"; $E("freeMsg2").style.display="none";
if(onClosing)alert("A-guest:close");
clearInterval(InRoomTim); OutRoomTim=setInterval(this.searchRooms.bind(this),1000);
}else if(R&&this.getGuests(R).length<guestsLength){
this.addGuest(R); oSelf.on=R; oSelf.Role={}; this.saveSelf();
$E("freeBnr1").innerHTML="退出房间"; $E("freeBnr1").style[bc]="#F55";
$E("freeMsg0").innerHTML=R; $E("freeMsg2").style.display="block";
clearInterval(OutRoomTim); InRoomTim=setInterval(this.scanRoomDatas.bind(this),500);
};
this.scanRoomDatas();
};
this.B_Player=function(PP){
if(!oSelf.on||(oSelf.Role.A && PP && oSelf.Role.A!=PP)){return false;}else{ oRoom=this.openRoom(oSelf.on); };
if(oSelf.Role.A){
if(!onClosing && this.onGame){alert("B_Player:is gaming!");return false;};
if(oRoom.ready[oSelf.Role.A]){ this.C_Ready(); };
oRoom[oSelf.Role.A]=false; oRoom.inTime[oSelf.Role.A]=new Date().getTime()+1800000; this.saveRoom(); this.scanRoomDatas(); oSelf.Role={}; if(onClosing)alert("B-player:close");
}else if(!oRoom[PP]){
oSelf.Role.A=PP; oSelf.Role.B=PAB[PP];
oRoom[PP]=this.name; oRoom.inTime[PP]=new Date().getTime();
this.saveRoom(); this.scanRoomDatas();
};
};
this.C_Ready=function(){
if(!oSelf.Role.A){return false;}else{ oRoom=this.openRoom(oSelf.on); };
if(oRoom.ready[oSelf.Role.A]){
if(!onClosing && oRoom.onGame){alert("C_Ready:is gaming!");return false;};
this.StopGame(); if(onClosing)alert("C-ready:close");
}else if(oRoom[oSelf.Role.B]){
useRand=-1; this.onGame=false; oRoom.onGame=false;
if(oRoom.inTime[oSelf.Role.A]<oRoom.inTime[oSelf.Role.B]){
useRand=parseInt(Math.random()*10)%2;
oRoom.rand=useRand; oRoom.frees=[];
oRoom.gameTime.player1=oRoom.setTimes;
oRoom.gameTime.player2=oRoom.setTimes;
};//↑ God Area ******---------- ↑ ------****************
oRoom.ready[oSelf.Role.A]=true;
this.saveRoom();
};
this.scanRoomDatas();
};
// reading Free Area **********************************************
this.clearUI=function(){
for(var i=0;i<childrens.length;i++){ childrens[i].style[bc]="transparent";};
this.oldFreeLen=0; box=[];
};
this.downFreeSacn=function(){
if(box[this.onPiece]!=undefined){return false;};
this.oldFreeLen=oRoom.frees.length; box[this.onPiece] = (oRoom.frees.length%2);
childrens[this.onPiece].style[bc] = (oRoom.frees.length%2==0?white:black);
oSelf.goTiming=PAB[oSelf.goTiming]; this.testWiner(this.onPiece);
if(oRoom.onGame){ $E(oSelf.goTiming+"tim").style.color="#D55"; $E(PAB[oSelf.goTiming]+"tim").style.color="#ACC"; };
};
this.readFrees=function(){
if(oRoom.frees.length>this.oldFreeLen && oRoom.frees.length%2 == useRand){ this.onPiece = oRoom.frees[oRoom.frees.length-1]; this.downFreeSacn(); };
};
this.downFree=function(inx){
this.onPiece=eval(inx); if(oRoom.frees.length%2 == useRand){ oRoom.frees.push(this.onPiece); this.saveRoom(); this.downFreeSacn(); };
};
// game exists area *******************************
this.testWiner=function(inx){
var t=[] ,n=0 ,myX=parseInt(inx/xyLen), itX, winReg=(oRoom.frees.length%2),fullFree;
this.winer=(winReg==1?"黑子":"白子");
function getFullOrOver(drc,rev){
var ft=[]; for(var i=1;i<xyLen;i++){ n=inx+drc*i*rev; itX = parseInt(n/xyLen); if(Math.abs(itX-myX)>i || itX<0||itX>=xyLen || box[n]!=winReg){ return ft; }else{ ft.push(n); }; };
};
function showFullOrOver(arr,sty){
if(sty=="#0F0"||(!fullFree&&sty=="#0CC"))childrens[arr[0]].style.background=sty; for(var i=1;i<arr.length;i++){ childrens[arr[i]].style.background=sty; };
};
for(var i=0;i<4;i++){
t[i]=[inx]; t[i]=t[i].concat(getFullOrOver(arrDirc[i],1)); t[i]=t[i].concat(getFullOrOver(arrDirc[i],-1));
if(t[i].length>5){/* 超出 */}else if(t[i].length==5){this.StopGame();/* 连满 */ alert(this.winer+"获胜!");onGame=false; };
};
$E("showKey2").value=t.join("\n\n");
};
this.StopGame=function(type){
useRand=-1; this.onGame=false; $E("freeBnr2").innerHTML="准备"; $E("freeBnr2").style[bc]="#777";
if(oSelf.goTiming){ $E(oSelf.goTiming+"tim").style.color="#ACC"; };
oRoom.ready={}; oRoom.onGame=false; this.saveRoom();
};
// scan area *******************************************
this.nolive=function(R,type){
if(type){var t=this.openRoom(R);if(!t.time||t.time<(Ftime-180000)){deleteFolder(BigSrc+R);};};
};
this.startGame=function(){
if(oRoom.inTime[oSelf.Role.A]>oRoom.inTime[oSelf.Role.B]){useRand=contraryNUM[oRoom.rand];};
oRoom.onGame=true; this.saveRoom(); this.onGame=true; this.clearUI();
oSelf.goTiming=(useRand==0?oSelf.Role.A:oSelf.Role.B);
$E(oSelf.goTiming+"tim").style.color="#D55";
};
this.searchRooms=function(){
var str="",strRooms="<div style=\u0022width:100px;height:20px;font-size:16px;background:#777;margin:1px 0px;cursor:pointer;color:white;text-align:center;\u0022 onclick=\u0022$E('freeLists3').innerHTML=this.innerHTML;\u0022>INNEROF</div>";
var f=fso.getFolder(BigSrc);var d=new Enumerator(f.SubFolders);
for(;!d.atEnd();d.moveNext()){ this.nolive(d.item().name,true);str+=strRooms.replace("INNEROF",d.item().name); };
Ftime=new Date().getTime(); $E("freeLists2").innerHTML=str; this.saveSelf();
};
this.scanRoomDatas=function(){
oRoom=this.openRoom(oSelf.on);
if(!oRoom.onGame){ this.showPlayers(); };
this.onGameExists();
if(oRoom.onGame){ this.goTimer(); };
Ftime=new Date().getTime(); this.saveSelf();
};
this.onGameExists=function(){
if(!oSelf.Role.A){
$E("freeBnr2").innerHTML="未入座"; $E("freeBnr2").style[bc]="#777";
}else if(!oRoom[oSelf.Role.B]){
$E("freeBnr2").innerHTML="等待入座"; $E("freeBnr2").style[bc]="#777"; if(this.onGame){this.StopGame();};
}else if(!this.onGame){
if(oRoom.ready[oSelf.Role.A]&&oRoom.ready[oSelf.Role.B]){this.startGame();};this.showReadys();
}else{ this.readFrees(); };
};
this.showPlayers=function(){
if(oRoom.player1){$E("player1").innerHTML=oRoom.player1; $E("player1").style[bc]="#CCC";}else{$E("player1").innerHTML="加入"; $E("player1").style[bc]="#777"; $E(PA+"tim").innerHTML="---"; };
if(oRoom.player2){$E("player2").innerHTML=oRoom.player2; $E("player2").style[bc]="#CCC";}else{$E("player2").innerHTML="加入"; $E("player2").style[bc]="#777"; $E(PB+"tim").innerHTML="---"; };
if(oRoom.onGame){return false;};
if(oRoom.player1&&oRoom.player2){
if(oRoom.inTime.player1<oRoom.inTime.player2){$E(PA+"tim").innerHTML="房主";}else{$E(PB+"tim").innerHTML="房主";};
}else if(oRoom.player1||oRoom.player2){
if(oRoom.player1){$E(PA+"tim").innerHTML="房主";}else{$E(PB+"tim").innerHTML="房主";};
};
};
this.showReadys=function(){
if(!oRoom.ready[oSelf.Role.A]){
$E("freeBnr2").innerHTML="新局发起";$E("freeBnr2").style[bc]="#CCC";
}else{
$E("freeBnr2").innerHTML=oRoom.ready[oSelf.Role.B]?(useRand==1?"对方先":"我方先"):"我方就绪"; $E("freeBnr2").style[bc]="#7F7";
};
$E(oSelf.Role.A).style[bc]="#CC7";
};
this.goTimer=function(){
if(!this.onGame){
if(oSelf.saveTimes!=oRoom.setTimes){ oRoom.setTimes=(oRoom.setTimes<180?180:oRoom.setTimes>1800?1800:oRoom.setTimes); oSelf.saveTimes=oRoom.setTimes; this.saveRoom(); };
if(oRoom.ready.player1){ $E("player1tim").innerHTML=parseTime(oRoom.setTimes); };
if(oRoom.ready.player2){ $E("player2tim").innerHTML=parseTime(oRoom.setTimes); };
}else{
if(oSelf.Role.A == oSelf.goTiming){oRoom.gameTime[oSelf.goTiming]-=0.5;this.saveRoom();};
$E(oSelf.goTiming+"tim").innerHTML=parseTime(oRoom.gameTime[oSelf.goTiming]);
};
};
// init area *******************************************
var strBackgroundUI="<span style=\u0022width:(1)px;height:(1)px;float:left;border:1px solid black;border-radius:1px;\u0022></span>";
var strFreesUI="<span style=\u0022width:(1)px;height:(1)px;float:left;border:none;border-radius:50%;\u0022 value=\u0022valueInr\u0022 onclick=\u0022FREE.downFree(this.getAttribute('value'));\u0022></span>";
this.initBoxUI=function(siz,len){
$E("freeBox1").innerHTML=""; $E("freeBox2").innerHTML="";
var str1="",str2=""; xyLen=len; arrDirc=[1,len+1,len-1,len]
var strA=strBackgroundUI.replace(/\(1\)/g,siz-2);
var strB=strFreesUI.replace(/\(1\)/g,siz);
for(var i=0;i<len*len;i++){
if(i<=(len*(len-2))){str1+=strA;};
str2+=strB.replace("valueInr",i);
};
Stys.set("freeBox1","border:1px solid black;width:AOFpx;height:AOFpx;top:BOFpx;left:BOFpx;".replace(/AOF/g,siz*(len-1)).replace(/BOF/g,parseInt($E("freeBox2").parentNode.offsetHeight/2-(siz*(len-1)/2))));
Stys.set("freeBox2","width:AOFpx;height:AOFpx;top:BOFpx;left:BOFpx;".replace(/AOF/g,siz*len).replace(/BOF/g,parseInt($E("freeBox2").parentNode.offsetHeight/2-(siz*len/2))));
$E("freeBox1").innerHTML=str1; $E("freeBox2").innerHTML=str2;
childrens=$E("freeBox2").children;
};
// close Area *********************** *************** *************** ******************
this.close=function(typ){
var t=0;
try{
onClosing=true; t=1;
if(oSelf.on)this.A_Guest(oSelf.on); t=2;
deleteFile(BigSrc+this.name+Txt);
}catch(e){alert("Errors",JSON.stringify(returnError(e)));};
};
// init this area ************
if(this.name){OutRoomTim=setInterval(this.searchRooms.bind(this),1000);}else{$E("freeMsg1").innerHTML="游客 无名";};
};
C. 辅助五子棋部分 ————— 配合五子棋函数中cookie或storage的函数,用来监测cookie个数或storage个数的函数,辅助部分《getKeyFunctions.js》:
function getKeyTable(){
var elm,nScrollWidth;
getKeyTable.prototype.Targ=this;
elm=document.createElement("div"); elm.setAttribute("id","getKeyTable");
document.body.appendChild(elm);
Stys.set("getKeyTable","width:260px;height:520px;position:absolute;left:3px;top:3px;background:#37F;border:2px solid gray");
// A
elm=document.createElement("div"); elm.setAttribute("id","showKey0"); elm.onselectstart=new Function("return false");
$E("getKeyTable").appendChild(elm);
Stys.set("showKey0","width:260px;height:18px;fontSize:12px;lineHeight:18px;overflow:hidden;margin:1px 0px;textAlign:cneter;background:#06A;color:#CF0");
elm=document.createElement("span"); elm.setAttribute("id","showKey0_len"); elm.innerHTML="个数";
$E("showKey0").appendChild(elm);Stys.set("showKey0_len","width:60px;height:18px;display:inline-block;textAlign:left");
elm=document.createElement("span"); elm.setAttribute("id","showKey0_title");elm.innerHTML="标题";
elm.onclick=function(){if(this.value=="1"&&confirm('delete this '+this.innerHTML+'?')){if(localStorage){localStorage.removeItem(this.innerHTML);}else{document.cookie=this.innerHTML+"=0;expires="+new Date().toUTCString();};getKeys.show();}else{this.value=1;setTimeout(function(){this.value=0;}.bind(this),200);};};
$E("showKey0").appendChild(elm);Stys.set("showKey0_title","width:150px;height:18px;display:inline-block;wordWrap:break-word;color:#FF0;textAlign:center");
elm=document.createElement("button"); elm.setAttribute("id","showKey0_close");elm.innerHTML="X";
elm.setAttribute("onclick","this.blur();getKeyTable.prototype.Targ.display(false);");
$E("showKey0").appendChild(elm);Stys.set("showKey0_close","width:20px;marginLeft:30px;height:18px;border:none;");
// B
elm=document.createElement("div"); elm.setAttribute("id","showKey1_back");
$E("getKeyTable").appendChild(elm);
Stys.set("showKey1_back","width:80px;height:500px;overflow:hidden");
elm=document.createElement("div"); elm.setAttribute("id","showKey1");
$E("showKey1_back").appendChild(elm);
Stys.set("showKey1","width:80px;height:500px;wordWrap:break-word;background:#99D;textAlign:left;overflow:scroll");
nScrollWidth=$E("showKey1").offsetWidth-$E("showKey1").clientWidth;
Stys.set("showKey1","width:px1px;height:px2px".replace("px1",80+nScrollWidth).replace("px2",500+nScrollWidth));
// C
elm=document.createElement("div"); elm.setAttribute("id","showKey2_back");
$E("getKeyTable").appendChild(elm);
Stys.set("showKey2_back","width:180px;height:500px;position:absolute;right:0;top:20px;overflow:hidden");
elm=document.createElement("textarea"); elm.setAttribute("id","showKey2");
$E("showKey2_back").appendChild(elm);
Stys.set("showKey2","width:180px;height:500px;color:white;background:#223;border:none;");
Stys.set("showKey2","width:px1px;height:px2px".replace("px1",180+nScrollWidth).replace("px2",500+nScrollWidth));
this.show=function(){
var elm_tmp;
$E("showKey1").innerHTML="";
if(localStorage){
this.t=FREE.getDatasStorage();
}else{this.t=FREE.getDatasCookie();};
for(var i=0;i<this.t.length;i++){
elm_tmp=document.createElement("button");
elm_tmp.innerHTML = this.t[i][0];
Stys.set(elm_tmp,"width:80px;height:20px;border:none;fontSize:16px;color:#11A;display:block;overflow:hidden");
elm_tmp.setAttribute("onclick","if(localStorage){$E('showKey2').value=localStorage.getItem(this.innerHTML);}else{$E('showKey2').value=openStorage(this.innerHTML);};$E('showKey0_title').innerHTML=this.innerHTML;this.blur();");
$E("showKey1").appendChild(elm_tmp);
};
$E("showKey0_len").innerHTML="数量:"+this.t.length;
};
this.display=function(tf){
if(tf==undefined){
return $E("getKeyTable").style.display!="none";
};
if(tf){
$E("getKeyTable").style.display="block";
}else{
$E("getKeyTable").style.display="none";
};
};
this.display(0);
};
D.应用实例部分 ——– 《Free.html》:
<html>
<head>
<meta charset="utf-8"/>
<script src="C:\Users\Administrator\Desktop\CODES\js\changer.js"></script>
<script>
var locationtext=location.href.replace(/(file:\/{0,3})/,"");
var txtname=locationtext.match(/[^\/\\]+$/)[0];
var txtsrc=locationtext.replace(txtname,"");
var fso,fsoTF=(!!window.ActiveXObject || "ActiveXObject" in window);
if(fsoTF){fso=new ActiveXObject("Scripting.FileSystemObject");};
function $E(ids){
return document.getElementById(ids);
};
function deleteFolder(src){
if(!fso.FolderExists(src)){return false;};
try{
fso.deleteFolder(src);
}catch(e){alert("deleteFolder\n "+e.name+":"+e.message);};
};
function deleteFile(src){
if(!fso.FileExists(src)){return false;};
try{
fso.deleteFile(src);
}catch(e){alert("deleteFile:\n "+e.name+":"+e.message);};
};
function ExistsFile(src){
return fso.FileExists(src);
};
function ExistsFolder(src){
return fso.FolderExists(src);
};
function openF(src){
if(!ExistsFile(src)){return false;};
var t,f=fso.OpenTextFile(src,1);
if(f.AtEndOfLine){return false;};
t=f.ReadAll(); f.Close();
return t;
};
function cretF(src,str){
if(!src)return false;
try{
var f=fso.CreateTextFile(src);
f.Write(str); f.Close();
}catch(e){alert("createTextFile:\n "+e.name+":"+e.message);};
};
function cretFD(src){
try{
if(!ExistsFolder(src)){
fso.CreateFolder(src);
};
}catch(e){};
};
function cretf(src,str){
try{
var f=fso.CreateTextFile(src,true);
f.write(str); f.close();
}catch(e){sendError(e.name,e.message);};
};
function openf(src){
if(!fso.FileExists(src)){return false};
try{
var str,f=fso.OpenTextFile(src,1);
if(!f.AtEndOfLine){
str=f.ReadAll(); f.close();
}else{return false};
return str;
}catch(e){sendError(e.name,e.message);};
};
function openStorage(nam){
var t;
if(localStorage){
t=localStorage.getItem(nam);
}else{
var cA,c=document.cookie;
if(typeof c!='string'||c.length<2){return false;}else{c=c.split(";");};
for(var i=0; i<c.length; i++){
cA=c[i].split("=");cA[0]=cA[0].replace(/(^\s+)|(\s+$)/g,"");cA[1]=unescape(cA[1]);
if(nam == cA[0]){t=cA[1];break;};
};
};
if(t){
return t;
}else{return false;};
};
function cretStorage(nam,str){
if(localStorage){
localStorage.setItem(nam,str);
}else{
document.cookie =nam+"="+escape(str)+";expires="+new Date(new Date().getTime()+31*86400000).toUTCString();
};
};
function sendError(s1,s2){
var str=(s1?s1:"")+(s2?s2:"");
alert(str);
};
function ExistsDomElm(obj){
if(typeof(obj)=="string" && $E(obj)){
return $E(obj);
}else if(typeof(obj)=="object" && obj.nodeType==1){
return obj;
};
};
function returnError(e){
if(!(navigator.appName=="Microsoft Internet Explorer")){
return {name:e.name,message:e.message,lineNumber:e.lineNumber,fileName:e.fileName,stack:e.stack};
}else{
return {name:e.name,errorNumber:(e.number&0xFFFF),message:e.message};
};
}
function styFunction(){
this.get=function(obj,sty){
}
this.set=function(obj,sty){
if(!obj || !sty || typeof(sty)!="string"){return false};
var objs=[],Sty=[],o;
sty=sty.replace(/(\;$)|(^\;)/g,"").split(";");
if(typeof(obj)=="string" || (typeof(obj) == "object" && obj.nodeType==1)){
objs[0]=obj;
}else if(typeof(obj)=="object"&&!obj.length){
objs=[];
}else{objs=obj;};
for(var i=0;i<sty.length;i++){
Sty.push([sty[i].slice(0,sty[i].indexOf(":")),sty[i].slice(sty[i].indexOf(":")+1,sty[i].length)]);
};
for(var i=0;i<objs.length;i++){
o=ExistsDomElm(objs[i]);
if(o && o.nodeType==1){
for(var k=0;k<Sty.length;k++){
o.style[Sty[k][0]]=Sty[k][1];
};
};
};
};
};var Stys=new styFunction();var getKeys;
function tipTF(){
var t=document.activeElement.tagName.toUpperCase();
if(t=="TEXTAREA"||t=="INPUT"){return false;}else{return true;};
};
function stopEvents(e){
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue=false;
};
};
function stopBubble(e){
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble=true;
};
};
document.onkeydown=function(e){
e=e||window.event;
keyAct=document.activeElement;
if(tipTF()&&e.keyCode==27){
stopEvents(e); if(getKeys.display()){getKeys.display(false);}else{getKeys.display(true);getKeys.show();};
}else if(tipTF()&&e.keyCode==32){getKeys.show();};
};
var FREE;
window.onbeforeunload=function(){
try{
FREE.close();FREE.deleteSelf();
}catch(e){alert(FREE+"- "+e.name+":"+e.message);};
};
window.onload=function(){
Stys.set("freeBigBox","width:1300px;height:900px;background:#FFF;border:2px solid black;position:relative;left:0;top:0;margin:auto;");
Stys.set("freeLists","width:100px;height:850px;background:#333;position:absolute;left:0;top:0");
Stys.set("freeBox","width:800px;height:800px;background:#DC7;textAlign:center;position:absolute;left:300px;top:50px;");
Stys.set("freeBnr","width:1300px;height:50px;background:#555;position:absolute;bottom:0;left:0;");
Stys.set("freeMsg","width:1200px;height:50px;background:#225;position:absolute;left:100px;top:0");
Stys.set($E("freeLists").children,"width:100px;fontSize:18px;");
Stys.set($E("freeBnr").children,"width:80px;height:30px;fontSize:12px;border:none;background:#777;vertical:middle;margin:10px 3px;");
Stys.set($E("freeMsg").children,"height:50px;fontSize:24px;position:absolute;top:0;");
Stys.set(["freeBox1","freeBox2"],"position:absolute;");
Stys.set("freeMsg0","width:100px;left:0;color:#FAA;fontSize:16px;textAlign:center;lineHeight:50px;");
Stys.set("freeMsg1","width:900px;left:100px;color:#AAF;textAlign:center;lineHeight:50px;");
Stys.set("freeMsg2","width:200px;right:0;fontSize:12px;background:none;");
Stys.set(["player1","player2"],"width:95px;height:20px;fontSize:14px;color:black;border:none;background:#777;verticalAlign:middle;");
Stys.set(["player1"],"margin:4px 2px 0px 3px;");
Stys.set(["player2"],"margin:4px 3px 0px 2px;");
Stys.set(["player1tim","player2tim"],"width:95px;height:20px;color:#ACC;border:none;background:#245;verticalAlign:middle;");
Stys.set(["player1tim"],"margin:0px 2px 5px 3px;");
Stys.set(["player2tim"],"margin:0px 3px 5px 2px;");
Stys.set("freeLists3","height:25px;color:red;border:none;background:#322;");
Stys.set("freeLists2","height:800px;overflow:hidden;");
Stys.set("freeLists1","height:25px;color:#CCF;textAlign:center;");
Stys.set("testEvalArea","width:300px;height:40px;border:none;background:#999;color:white;display:block;");
Stys.set("showevalError","width:300px;height:40px;border:none;background:#555;color:#AFF;display:block;");
cretFD(txtsrc+"Zone/");
FREE=new FREEFunction(txtsrc+"Zone/");
FREE.initBoxUI(30,16);
var drg2=chger_Drager("freeLists");
var siz1=chger_Resizer("freeLists");
var siz2=chger_Resizer("freeBigBox");
getKeys=new getKeyTable();
setInterval(getKeys.show,500);
initClicks();
};
function initClicks(){
$E("freeLists3").onclick=function(){
var t=this.innerHTML;
if(t.length){
FREE.A_Guest("#"+t,true);
};
};
$E("freeBnr1").onclick=function(){
FREE.startCreateRoom();
};
$E("freeBnr2").onclick=function(){
FREE.C_Ready();
};
$E("player1").onclick=function(){
FREE.B_Player("player1");
};
$E("player2").onclick=function(){
FREE.B_Player("player2");
};
}
</script>
</head>
<body>
<div id="freeBigBox">
<div id="freeLists">
<div id="freeLists1">标题</div>
<div id="freeLists2"></div>
<button id="freeLists3">确认</button>
</div>
<div id="freeBox">
<div id="freeBox1"></div>
<div id="freeBox2"></div>
<div id="freeBox3"></div>
</div>
<div id="freeBnr">
<button id="freeBnr1">创建房间</button>
<button id="freeBnr2">就绪</button>
<button id="freeBnr3">name</button>
</div>
<div id="freeMsg">
<div id="freeMsg0">FREE ROOM</div>
<div id="freeMsg1">FREE GAME</div>
<div id="freeMsg2"><button id="player1">1</button><button id="player2">2</button><button id="player1tim">00:00:00</button><button id="player2tim">00:00:00</button></div>
</div>
</div>
<div style="position:absolute;left:5px;bottom:4px;border:1px solid red;">
<textarea id="testEvalArea" onblur="try{$E('showevalError').value=eval(this.value);}catch(e){$E('showevalError').value=e.name+':'+e.message;};"></textarea>
<textarea id="showevalError" onblur="try{}catch(e){};"></textarea>
</div>
<script src="C:\Users\Administrator\Desktop\CODES\freeFunctions.js"></script>
<script src="C:\Users\Administrator\Desktop\CODES\getKeyFunctions.js"></script>
</body>
</html>
XXXXX. 赠品部分 —————– 附加一个前段时间写的拖拽、淡入淡出、自动缩放功能的《E_drag.js》库函数:
Function.prototype.bindof = function(othis){//添加bind函数
var self = this;
var args = Array.prototype.slice.call(arguments,1);
return function(){
return self.apply(othis,args.concat(Array.prototype.slice.call(arguments)));
}
};
function operateEvents(obj,evn,typ,fn){
typ?(obj.attachEvent?obj.attachEvent("on"+evn,fn):obj.addEventListener(evn,fn)):(obj.removeEventListener?obj.removeEventListener(evn,fn):obj.detachEvent("on"+evn,fn));
};
function stopEvents(e){e&&e.preventDefault?e.preventDefault():window.event.returnValue=false;}
function stopBubble(e){e&&e.stopPropagation?e.stopPropagation():window.cancelBubble=true;};
function timesFunc(){
var tims=[];
this.set=function (nam,fun,typ,tim){
var tf=false;
if(typ){
for(var i=0;i<tims.length;i++){
if(tims[i][0]==nam){
tf=true;tims[i]=[nam,fun,tim];break;
};
};
if(tf)tims.push([nam,fun,tim]);
if(this[nam])clearInterval(this[nam]);
this[nam]=setInterval(fun,tim);
}else{
if(this[nam])clearTimeout(this[nam]);
this[nam]=setTimeout(fun,tim);
};
};
this.close=function(nam,typ){
if(typ){
if(this[nam]){clearInterval(this[nam]);this[nam]=false;};
}else{clearTimeout(this[nam]);this[nam]=null;};
};
this.showTims=function(){
return tims;
};
};
var otims=new timesFunc();
function exelm(elm){//验证元素函数
var obj;
if("string" == typeof elm){
obj=document.getElementById(elm);
return obj&&obj.tagName?obj:false;
}else{
return elm&&elm.tagName?elm:false;
};
};
function getstyle(){//获取样式函数
var styUp, styLow, LowOrUp = null;
this.upper=function(val){
val=val.match(/[a-zA-z]{1,}/g); if(val==null)return '';
for(var i = 1;i<val.length; i++)val[i]=val[i].charAt(0).toUpperCase()+val[i].slice(1,val[i].length);
return val.join("");
};
this.lower=function(val){
val=val.match(/(^[a-z]+)|([A-Z]?[a-z]+)/g); if(!val)return false;
for(var i=0; i<val.length; i++)val[i]=val[i].toLowerCase();
return val.join("-");
};
this.comstyle = function(obj,val,show){
if(!(typeof obj=="object")||!obj.tagName)return "0";
if(LowOrUp){
styUp = window.getComputedStyle(obj,null)[this.upper(val)];
if(styUp == undefined){LowOrUp = false;};
return styUp;
}else if(LowOrUp == null){
styUp = window.getComputedStyle(obj,null)[this.upper(val)];
styLow = window.getComputedStyle(obj,null)[this.lower(val)];
if(styUp!=undefined){LowOrUp = true;return styUp;}else if(styLow != undefined){LowOrUp = false;return styLow;}else{alert("Error Aruments!");return "Error Aruments!";};
}else{
styLow = window.getComputedStyle(obj,null)[this.lower(val)];
if(styLow == undefined){LowOrUp = true;};
return styLow;
};
}
this.curstyle = function(obj,val,show){
if(!(typeof obj=="object")||!obj.tagName)return "0";
if(LowOrUp){
styUp = obj.currentStyle[this.upper(val)];
if(styUp == undefined){LowOrUp = false;};
return styUp;
}else if(LowOrUp == null){
styUp = obj.currentStyle[this.upper(val)];
styLow = obj.currentStyle[this.lower(val)];;
if(styUp!=undefined){LowOrUp = true;return styUp;}else if(styLow != undefined){LowOrUp = false;return styLow;}else{alert("Error Aruments!");return "Error Aruments!";};
}else{
styLow = obj.currentStyle[this.lower(val)];
if(styLow == undefined){LowOrUp = true;};
return styLow;
};
}
this.get = (window.getComputedStyle?this.comstyle:this.curstyle);
};
function DragAreaFunction(dragObj,mov,ctlTf){//拖拽位置函数
function initf(dragObj,mov){
var objtmp=new DragAreaFunction(dragObj,mov);
return objtmp.obj?objtmp:false;
};
this.init=initf;
if(0 == arguments.length)return this.init;//if srguments is null. then return init(function) for create new Object
if(!exelm(dragObj)){alert("失败!dragObj is null/Error:stoping...");return false;};
this.obj=exelm(dragObj);
if(typeof(mov)=="object"&&mov.obj){this.oMove=mov;}else{alert("oMove is null/Error:create new oMove...");this.oMove=MoveAreaFunction()(dragObj);};
this.closetim="close"+new Date().getTime()+Math.random();
this.demovef=function(){this.onbeforeReadyMove(1);otims.close(this.closetim,false);}
this.demove=function(close){
close?otims.close(this.closetim,false):otims.set(this.closetim,this.demovef.bindof(this),false,1000);
};
this.onbeforeReadyMove=function(e){
if(ctlTf)return false;
if(e!=1){
e= window.event||arguments[arguments.length-1];
stopEvents(e); stopBubble(e);
};
this.onready=this.onready?false:true;
this.obj.style.border=this.onready==true?"1px solid #F00":"1px solid "+this.oMove.border;
this.move=false;
this.onready?this.demove():this.demove(true);
};
this.onReadyMove=function(e){
e= window.event||arguments[arguments.length-1];
stopEvents(e); stopBubble(e);
if(this.onready||ctlTf){
this.move=true; this.demove(true);
this.defferX = e.clientX - this.oMove.obj.offsetLeft;
this.defferY = e.clientY - this.oMove.obj.offsetTop;
operateEvents(document,"mousemove",true,this.onMove.bindof(this));
};
};
this.onMove=function(e){
e= window.event||arguments[arguments.length-1];
stopEvents(e); stopBubble(e);
if(this.move){
this.oMove.move(e.clientX - this.defferX,e.clientY - this.defferY);
};
};
this.end=function(){
e= window.event||arguments[arguments.length-1];
stopEvents(e);stopBubble(e);
if(this.onready||ctlTf){
this.move=false;
operateEvents(document,"mousemove",false,this.onMove.bindof(this));
this.demove();
};
};
operateEvents(this.obj,"dblclick",true,this.onbeforeReadyMove.bindof(this,12,23));
operateEvents(this.obj,"mousedown",true,this.onReadyMove.bindof(this));
operateEvents(document,"mouseup",true,this.end.bindof(this));
};
function MoveAreaFunction(obj,box,gorun,nobd){//移动位置函数
function initf(obj,box,gorun){
var objtmp=new MoveAreaFunction(obj,box,gorun);
return objtmp.obj?objtmp:false;
};
this.x=0;this.y=0;
this.init=initf;
if(arguments.length == 0){return this.init;};//if srguments is null. then return init(function) for create new Object
if(!exelm(obj)){alert("失败!MoveAreaFunction:obj is null/Error!stoping...");this.obj=false;return false};
this.obj=exelm(obj);
if(typeof(box)=="function"&&gorun==undefined){this.goRun=box;}else if(exelm(box)){
this.box=(this.obj==exelm(box)?(exelm(box).parentNode?exelm(box).parentNode:null):exelm(box));
};//else{alert("set Box: unknow Error:stoping...");gorun=false;};
if(gorun){this.goRun=gorun;};
this.sty=new getstyle();
if(this.sty.get(this.obj,"border-style")!='none'&&this.sty.get(this.obj,"borderColor")){
this.border=this.sty.get(this.obj,"borderColor");
}else{this.border=this.sty.get(this.obj,"background-color");!this.border?this.border="black":null;};
if(!nobd)this.sty.get(this.obj,"border-width")=="0px"||this.sty.get(this.obj,"border-width")==""?this.obj.style.border="1px solid "+this.border:null;
if(this.box)this.limits=[0,0,this.box.offsetWidth-this.obj.offsetWidth,this.box.offsetHeight-this.obj.offsetHeight];
this.setGoRun=function(gorun){this.goRun=gorun;};
this.move=function(x,y){
if(this.limits){
this.x = (x<this.limits[0]?this.limits[0]:(x>this.limits[2]?this.limits[2]:x));
this.y = (y<this.limits[1]?this.limits[1]:(y>this.limits[3]?this.limits[3]:y));
};
this.obj.style.left=this.x+"px";
this.obj.style.top=this.y+"px";
if(this.goRun){this.goRun(this.x,this.y);};
};
};
function runSizeTimer(obj){
if(!exelm(obj)){return function(){alert("元素错误!Element is illegal!")};};
obj = exelm(obj);
this.reverse = 1; this.gotim = 0;
this.precition = 1000000; this.speed =5; this.opatf = false;
this.helps=function(){
alert(" [opacity]: set 0-100 _value\n [position]: change Left_set MaxPixle(+-)_value\n [position_L]: this too\n [position_T]: this too\n [amplify]: change left and amplify Elements_set LeftAndRightPixeleValue(+-)\n [amplify_LT]: this too\n [amplify_LB]: this too\n [amplify_RT]: this too\n [amplify_RB]: this too\n\nEND...");
};
this.widthf=function(a,b,pct){
if(a)
obj.style.width = parseInt(this.myX*pct)+"px";
if(b)
obj.style.height = parseInt(this.myY*pct)+"px";
};
this.opacityf=function (pct){
obj.style.filter= "alpha(Opacity:"+parseInt(this.myX*pct)+")";obj.style.opacity=parseInt(pct*10)/10;
if(obj.currentStyle)document.title=parseInt(this.myX*pct);
};
this.positionf=function (a,b,pct){
document.title=this.size;
if(a)
obj.style.left = parseInt(this.myX+this.size*pct)+"px";
if(b)
obj.style.top = parseInt(this.myY+this.size*pct*this.multiple)+"px";
};
this.amplifyf=function (a,b,pct){
if(a)
obj.style.left = parseInt(this.myX+this.size*(1-pct))+"px";
if(b)
obj.style.top = parseInt(this.myY+this.size*(1-pct)*this.multiple)+"px";
obj.style.width = parseInt(this.myW*pct)+"px";
obj.style.height = parseInt(this.myH*pct)+"px";
}
this.runaway=function(){
this.percents += this.percenter*this.reverse; this.percenter=parseInt(this.percenter*this.quiken*1000)/1000;
if(this.percents>=this.max){
this.percents = this.max;
this.closetf = true;
}else if(this.percents<=this.min){
this.percents = this.min;
this.closetf = true;
};
switch(this.type){
case "opacity":this.opacityf(this.percents/this.precition); break;
case "position":this.positionf(1,1,this.percents/this.precition); break;
case "position_L":this.positionf(1,0,this.percents/this.precition); break;
case "position_T":this.positionf(0,1,this.percents/this.precition); break;
case "amplify":this.amplifyf(1,1,this.percents/this.precition); break;
case "amplify_LT":this.amplifyf(0,0,this.percents/this.precition); break;
case "amplify_LB":this.amplifyf(0,1,this.percents/this.precition); break;
case "amplify_RT":this.amplifyf(1,0,this.percents/this.precition); break;
case "amplify_RB":this.amplifyf(1,1,this.percents/this.precition); break;
default:return false;
};
if(this.type.search(/position/)+1&&this.opatf){
this.opacityf(1-this.percents/this.precition);
}else if(this.type!="opacity"&&this.opatf){
this.opacityf(this.percents/this.precition);
};
if(this.closetf){
clearInterval(this.gotim); return false;
};
};
this.togo=function(tims,opa_tf,quik){
this.percenter = parseInt((this.speed/tims)*this.precition); this.reverse *= -1; this.closetf =false; this.opatf = opa_tf;
if(quik){
this.quiken = (quik<0.9835?0.9835:quik>1.05?1.05:quik);
}else{this.quiken = 1;};
switch(this.type){
case "opacity":this.nowvalue = stys.get(obj,"opacity"); this.datumvalue = obj.currentStyle?1:1; break;
case "position":this.nowvalue = getlefttop(obj,"left")-this.myX; this.datumvalue = this.size; break;
case "position_L":this.nowvalue = getlefttop(obj,"left")-this.myX; this.datumvalue = this.size; break;
case "position_T":this.nowvalue = getlefttop(obj,"top")-this.myY; this.datumvalue = this.size; break;
case "amplify":this.nowvalue = obj.offsetWidth; this.datumvalue = this.myW; break;
case "amplify_LT":this.nowvalue = obj.offsetWidth; this.datumvalue = this.myW; break;
case "amplify_LB":this.nowvalue = obj.offsetWidth; this.datumvalue = this.myW; break;
case "amplify_RT":this.nowvalue = obj.offsetWidth; this.datumvalue = this.myW; break;
case "amplify_RB":this.nowvalue = obj.offsetWidth; this.datumvalue = this.myW; break;
default:return false;
};
this.percents = parseInt(this.datumvalue!=0?this.nowvalue/this.datumvalue*this.precition:0);
clearInterval(this.gotim); this.gotim = setInterval(this.runaway.bindof(this),this.speed);
};
this.set=function(typ,mi,ma,siz){
if(arguments.length == 0){this.helps();}
this.min = (mi<0?0:mi>ma?ma/100*this.precition:mi/100*this.precition);
this.max = (ma>100?1*this.precition:ma<this.min/this.precition*100?this.min/this.precition*100:ma/100*this.precition);
this.type = typ;
if(typeof siz == "string"){
if(siz.search(/all/)+1){
this.size = obj.offsetWidth;
}else{
this.size = siz.search(/half/)+1?obj.offsetWidth/2:siz.search(/\-?[0-9]{1,4}px/)+1?eval(siz.replace(/[^0-9]/g,'')):siz.search(/^\-?[0-9]{1,4}$/)+1?eval(siz.replace(/[^0-9]/g,'')):3;
};
siz.search(/\-/)+1?this.size*=-1:null;
}else{
this.size = parseInt(siz)+1?siz:3;
};
if(this.size && this.type.search(/(position)|(amplify)/)+1){
this.myX = getlefttop(obj,"left"); this.myW = obj.offsetWidth; this.myY = getlefttop(obj,"top"); this.myH = obj.offsetHeight;
this.multiple = this.myH/this.myW;
this.type.search(/amplify/)?this.reverse *= -1:null;
}else if("opacity" == this.type){
this.myX = (obj.currentStyle?100:1);
};
}
};
function getlefttop(obj,str){return parseInt(stys.get(obj,str));};
function amplifyReduce(elm,filter){//自动缩放函数 带淡入淡出
function init(elm,filter){
var objtmp = new amplifyReduce(elm,filter);
return !objtmp.obj?false:objtmp;
};
if(!arguments.length)return init;
if(!exelm(elm)){alert(exelm(elm)+" no Found this Element!");return false;};
this.obj = exelm(elm);
if(filter)this.Filter = true;
this.toInout = 1;
this.setwidth = this.obj.offsetWidth;
this.setheight = this.obj.offsetHeight;
this.widthMultiple = parseInt(this.setwidth/this.setheight*100000)/100000;
this.tims = 5;
this.chgsize=function(x,y,opa){
this.obj.style.width = parseInt(x)+"px";
this.obj.style.height = parseInt(y)+"px";
if(this.Filter){
this.obj.style.opacity = opa/100;
this.obj.style.filter = "alpha(Opacity:"+opa+")";
};
//document.title=show+"_"+x+":"+y+":"+opa;
}
this.toInAndOut=function(){
this.X += this.toInout*this.runwidth; this.Y = this.X/this.widthMultiple;
if(this.X<=0 || this.X>=this.setwidth){
this.X = this.setwidth*(this.toInout+1)/2;
this.Y = this.setheight*(this.toInout+1)/2;
this.chgsize(this.X,this.Y,100*(this.toInout+1)/2,true);
clearInterval(this.tim);return false;
};
this.chgsize(this.X,this.Y,parseInt(this.X/this.setwidth*100));
document.getElementById("test2").innerHTML=new Date().toLocaleTimeString();
}
this.go=function(tims,elms){
if(!tims)tims=1;
this.runwidth = this.setwidth/(tims/this.tims);
this.toInout *= -1;
this.X = this.obj.offsetWidth;
clearInterval(this.tim); this.tim = setInterval(this.toInAndOut.bind(this),this.tims);
}
};