8点改变div大小之控制范围

红太狼 2022-08-06 07:08 348阅读 0赞

还是模仿  不过在范围的计算上跟cloudgamer已经有了点比较大的差异了!~

感觉写的不够理想，代码有冗余，还得加把劲呀!~

我会再次修改的！~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>wwww</title> <style type="text/css"> \#rRightDown,\#rLeftDown,\#rLeftUp,\#rRightUp,\#rRight,\#rLeft,\#rUp,\#rDown\{ position:absolute; background:\#C00; width:7px; height:7px; z-index:5; font-size:0; \} \#rLeftDown,\#rRightUp\{cursor:ne-resize;\} \#rRightDown,\#rLeftUp\{cursor:nw-resize;\} \#rRight,\#rLeft\{cursor:e-resize;\} \#rUp,\#rDown\{cursor:n-resize;\} \#rRightDown\{ bottom:-3px; right:-3px;\} \#rLeftDown\{ bottom:-3px; left:-3px;\} \#rRightUp\{ top:-3px; right:-3px;\} \#rLeftUp\{ top:-3px; left:-3px;\} \#rRight\{ right:-3px; top:50%\} \#rLeft\{ left:-3px; top:50%\} \#rUp\{ top:-3px; left:50%\} \#rDown\{ bottom:-3px; left:50%\} </style> </head> <body > <div id='sss' style="height:500px; width:500px; border:1px solid \#FF0000; left:30px; top:30px;z-index:1; position:absolute"></div> <div id='ss' style="height:100px; width:100px; border:1px solid \#000000; position:absolute; left:200px; top:200px; z-index:10" > <div id="rRightDown"> </div> <div id="rLeftDown"> </div> <div id="rRightUp"> </div> <div id="rLeftUp"> </div> <div id="rRight"> </div> <div id="rLeft"> </div> <div id="rUp"> </div> <div id="rDown"></div> </div> <div style=" top:560px; left:30px; border:1px solid \#000000; position:absolute"><input value="设置最小范围" type="button" οnclick="Setmin()" /><input value="取消最小范围" type="button" οnclick="Cancelmin()" /><input value="设置容器范围" type="button" οnclick="Setmax()" /><input value="取消容器范围" type="button" οnclick="Cancelmax()" /></div> <script> var isIE = (document.all) ? true : false; var $ = function (id) \{ return document.getElementById(id); \}; var Class = \{ create: function() \{ return function() \{ this.initialize.apply(this, arguments); \} \} \} var Extend = function(destination, source) \{ for (var property in source) \{ destination\[property\] = source\[property\]; \} \} var Bind = function(object, fun) \{ return function() \{ return fun.apply(object, arguments); \} \} var BindAsEventListener = function(object, fun) \{ var args = Array.prototype.slice.call(arguments).slice(2); return function(event) \{ return fun.apply(object, \[event || window.event\].concat(args)); \} \} var CurrentStyle = function(element)\{ return element.currentStyle || document.defaultView.getComputedStyle(element, null); \} function addListener(element,e,fn)\{ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)\}; function removeListener(element,e,fn)\{ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)\}; var Class = function(properties)\{ var \_class = function()\{return (arguments\[0\] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;\}; \_class.prototype = properties; return \_class; \}; var Resize =new Class(\{ options:\{ Max : false, mxContainer : null, mxLeft : 0, mxRight : 9999, mxTop : 0, mxBottom : 9999, Min : false, minWidth : 20, minHeight : 20, onResize: function()\{\} \}, initialize:function(obj,options)\{ this.\_obj = obj; this.\_resizeelm = null; this.\_fR = BindAsEventListener(this,this.Resize); this.\_fS = Bind(this,this.Stop); / this.Max = this.options.Max; this.mxContainer = this.options.mxContainer; this.mxLeft = this.options.mxLeft; this.mxTop = this.options.mxTop; this.mxRight = this.options.mxRight; this.mxBottom = this.options.mxBottom; this.Min = this.options.Min; this.minWidth = this.options.minWidth; this.minHeight = this.options.minHeight; this.onResize = this.options.onResize; Extend(this,options); / if(this.Max) \{ this.mxTop = parseInt(CurrentStyle(this.mxContainer).top); this.mxRight = parseInt(CurrentStyle(this.mxContainer).left)+parseInt(CurrentStyle(this.mxContainer).width); this.mxLeft = parseInt(CurrentStyle(this.mxContainer).left); this.mxBottom = parseInt(CurrentStyle(this.mxContainer).top)+parseInt(CurrentStyle(this.mxContainer).height); \} \}, Set:function(resize, side)\{ if(!resize)return; this.\_resizeelm = resize; var fun; switch(side.toLowerCase())\{ case 'up': fun = this.Up; break; case 'left': fun = this.Left; break; case 'right': fun = this.Right; break; case 'down': fun = this.Down; break; case 'left-up': fun = this.LeftUp; break; case 'right-up': fun = this.RightUp; break; case 'left-down': fun = this.LeftDown; break; case 'right-down': fun = this.RightDown; break; default : return; \} addListener(this.\_resizeelm,'mousedown',BindAsEventListener(this, this.Start, fun)) \}, Start:function(e,fun)\{ this.\_fun = fun; this.\_original = \[parseInt(CurrentStyle(this.\_obj).width),parseInt(CurrentStyle(this.\_obj).height),parseInt(CurrentStyle(this.\_obj).left),parseInt(CurrentStyle(this.\_obj).top)\] this.\_width = (parseInt(CurrentStyle(this.\_obj).left)||0) + parseInt(CurrentStyle(this.\_obj).width); this.\_height = (parseInt(CurrentStyle(this.\_obj).top) ||0) + parseInt(CurrentStyle(this.\_obj).height); //if(isIE)\{e.cancelBubble=true\}else\{e.preventDefault();\} addListener(document,'mousemove',this.\_fR); addListener(document,'mouseup',this.\_fS); \}, Stop:function()\{ removeListener(document, "mousemove", this.\_fR); removeListener(document, "mousemove", this.\_fS); window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); \}, Resize:function(e)\{ this.\_fun(e); isIE?(this.\_resizeelm.onlosecapture=function()\{this.\_fS\}):(this.\_resizeelm.οnblur=function()\{this.\_fS\}) \}, Up:function(e)\{ this.\_height>e.clientY?this.RepairUp(e):this.TurnDown(e); \}, Right:function(e)\{ e.clientX>this.\_original\[2\]?this.RepairRight(e):this.TurnLeft(e); \}, Down:function(e)\{ e.clientY>this.\_original\[3\]?this.RepairDown(e):this.TurnUp(e); \}, Left:function(e)\{ e.clientX<this.\_width?this.RepairLeft(e):this.TurnRight(e); \}, RightUp:function(e)\{ this.Up(e);this.Right(e); \}, LeftUp:function(e)\{ this.Up(e);this.Left(e); \}, LeftDown:function(e)\{ this.Left(e);this.Down(e); \}, RightDown:function(e)\{ this.Right(e);this.Down(e); \}, RepairDown:function(e)\{ this.\_obj.style.top = this.\_original\[3\]+'px'; this.\_obj.style.height = (this.Max?Math.min(e.clientY,this.mxBottom):e.clientY) - this.\_original\[3\]+'px'; if(this.Min&&e.clientX-this.\_original<this.minHeight) \{ this.\_obj.style.height = this.minHeight+'px'; \} \}, RepairLeft:function(e)\{ this.\_obj.style.left = (this.Max?Math.max(e.clientX,this.mxLeft):e.clientX) +'px'; this.\_obj.style.width = this.\_width-Math.max(e.clientX,this.mxLeft) + "px"; if(this.Min&&this.\_width-e.clientX<this.minWidth) \{ this.\_obj.style.left = this.\_width - this.minWidth +'px'; this.\_obj.style.width = this.minWidth+'px'; \} \}, RepairUp:function(e)\{ this.\_obj.style.top = this.Max?Math.max(e.clientY,this.mxTop)+'px':e.clientY+'px'; this.\_obj.style.height = this.\_height-(this.Max?Math.max(e.clientY,parseInt(this.mxTop)):e.clientY )+ "px"; if(this.Min&&e.clientY>this.\_height-this.minHeight) \{ this.\_obj.style.top = this.\_height - this.minHeight +'px'; this.\_obj.style.height = this.minHeight +'px' \} \}, RepairRight:function(e)\{ this.\_obj.style.left = this.\_original\[2\]+'px'; this.\_obj.style.width =(this.Max?Math.min(this.mxRight,e.clientX):e.clientX) - this.\_original\[2\] +'px'; if(this.Min&&e.clientX-this.\_original\[2\]<this.minWidth) \{ this.\_obj.style.width = this.minWidth+'px'; \} \}, TurnDown:function(e)\{ if(this.Min) \{ this.\_obj.style.top = this.\_height - this.minHeight +'px'; this.\_obj.style.height = this.minHeight +'px' return; \} this.\_obj.style.top = this.\_height+'px'; this.\_obj.style.height = Math.min(e.clientY,this.Max?parseInt(this.mxBottom):e.clientY) - this.\_height + 'px'; \}, TurnLeft:function(e)\{ if(this.Min) \{this.\_obj.style.width = this.minWidth+'px';return;\} this.\_obj.style.left = (this.Max?Math.max(e.clientX,this.mxLeft):e.clientX) +'px'; this.\_obj.style.width = this.\_original\[2\]-parseInt(CurrentStyle(this.\_obj).left)+'px'; \}, TurnRight:function(e)\{ if(this.Min) \{ this.\_obj.style.left = this.\_width - this.minWidth +'px'; this.\_obj.style.width = this.minWidth+'px'; return; \} this.\_obj.style.left = this.\_width + 'px'; this.\_obj.style.width = (this.Max?Math.min(e.clientX,this.mxRight):e.clientX)- this.\_width +'px' \}, TurnUp:function(e)\{ if(this.Min) \{ this.\_obj.style.height = this.minHeight+'px'; return; \} this.\_obj.style.top = (this.Max?Math.max(e.clientY,this.mxTop):e.clientY) +'px'; this.\_obj.style.height = this.\_original\[3\] - parseInt(CurrentStyle(this.\_obj).top) +'px'; \} \}); var gg = new Resize($('ss'),\{mxContainer:$('sss'),Max:true\}) gg.Set($('rUp'),'up'); gg.Set($('rRight'),'right'); gg.Set($('rLeft'),'left'); gg.Set($('rDown'),'down'); gg.Set($('rRightUp'),'right-up'); gg.Set($('rLeftUp'),'left-up'); gg.Set($('rLeftDown'),'left-down'); gg.Set($('rRightDown'),'right-down'); /// function Setmin()\{ gg.Min = true; \} function Cancelmin()\{ gg.Min = false; \} function Setmax()\{ gg.Max = true; \} function Cancelmax()\{ gg.Max = false; \} </script> </body> </html>