原生js实现拖拽与缩放等包含js设置样式与五子棋等

最近写五子棋，写着写着，写了几个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");//   Aelm=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;");//   Belm=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));//   Celm=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 Objectif(!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 Objectif(!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);}
};

原生js实现拖拽与缩放等包含js设置样式与五子棋等相关推荐

Hammer.js - 旋转拖拽移动缩放
感觉移动端原生支持的 touch.tap.swipe 几个事件好像还不够用,某些时候还会用到诸如缩放.长按等其他功能. 学习了一个手势库 Hammer.js,它是一个轻量级的触屏设备手势库,能识别出常 ...
html5 原生拖拽,原生JS实现拖拽效果
这篇文章主要为大家详细介绍了原生JS实现拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了JS实现拖拽效果的具体代码,供大家参考,具体内容如下 ...
原生js实现拖拽上传文件
原生js实现拖拽上传文件 <!DOCTYPE html> <html lang="en"><head><meta charset=&quo ...
原生JS实现拖拽进度条、滚动鼠标显示相应的内容
今天要分享的是运用原生JS实现拖拽进度条.滚动鼠标显示相应的内容,实现效果如下: 以下是代码实现,欢迎大家复制粘贴. <!DOCTYPE html> <html><hea ...
原生JS实现拖拽垂直进度条
先看效果图代码如下 <!DOCTYPE html> <html><head><meta http-equiv="Content-Type" ...
原生JS实现拖拽翻书特效
给大家分享一个用原生JS实现的拖拽翻书效果图,效果如下: 效果还不错吧,当然还需要两个图片. 1.书本封面. 2.书页实现代码如下,欢迎大家复制粘贴. <!DOCTYPE html> & ...
小程序的拖拽、缩放和旋转手势
在开发中,有时会遇到像App中的手势那样的效果,下面就仿照App实现了一下. wxml部分: <view class="touch-container"><vie ...
js实现拖拽+碰撞+重力
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
Js实现拖拽 --面向对象封装( 超详细中文注释)
这类文章网上的很多.我只是做了详细的中文注释.便于大家理解. --废话不多说直接上源码 (用到的图片请随便自己代替) javascript代码部分: 1 /**js拖拽特效封装*/ 2 //关于js ...

原生js实现拖拽与缩放等包含js设置样式与五子棋等

原生js实现拖拽与缩放等包含js设置样式与五子棋等相关推荐

最新文章

热门文章