div八点大小改变

╰半夏微凉° 2022-08-06 06:22 189阅读 0赞

依旧是学习的别人的,模仿的(Ps:我自己也先有写一遍,只是觉得自己写的确实没别人好,就模仿别人了)

<!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='ss' style="height:100px; width:100px; border:1px solid \#000000; position:absolute; left:200px; top:200px;" > <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 id='sss'></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(\{ initialize:function(obj)\{ this.\_obj = obj; this.\_resizeelm = null; this.\_fR = BindAsEventListener(this,this.Resize); this.\_fS = Bind(this,this.Stop); \}, Set:function(resize, side)\{ this.\_resizeelm = resize; var fun; if(!this.\_resizeelm)return; switch (side.toLowerCase()) \{ case "up" : fun = this.Up; break; case "right": fun = this.Right; break; case "down": fun = this.Down; break; case "left": fun = this.Left; 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); addListener(document,"mousemove",this.\_fR); addListener(document,'mouseup',this.\_fS) \}, Resize:function(e)\{ this.\_fun(e); isIE?(this.\_resizeelm.onlosecapture=function()\{this.\_fS\}):(this.\_resizeelm.οnblur=function()\{this.\_fS\}) \}, Stop:function()\{ removeListener(document, "mousemove", this.\_fR); removeListener(document, "mousemove", this.\_fS); window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); \}, Up:function(e)\{ if(this.\_height>e.clientY) \{ this.\_obj.style.top = e.clientY + "px"; this.\_obj.style.height = this.\_height-e.clientY + "px"; return; \} this.TurnDown(e); \}, Down:function(e)\{ if(e.clientY>this.\_original\[3\]) \{ this.\_obj.style.top = this.\_original\[3\]+'px'; this.\_obj.style.height = e.clientY - this.\_original\[3\]+'px'; return; \} this.TurnUp(e); \}, Left:function(e)\{ if(e.clientX<this.\_width) \{ this.\_obj.style.left = e.clientX +'px'; this.\_obj.style.width = this.\_width-e.clientX + "px"; return; \} this.\_obj.style.left = this.\_width+'px'; this.TurnRight(e); \}, Right:function(e)\{ if(e.clientX>this.\_original\[2\]) \{ this.\_obj.style.left = this.\_original\[2\]+'px'; this.\_obj.style.width = e.clientX- this.\_original\[2\]+ "px"; return; \} this.TurnLeft(e) \}, LeftUp:function(e)\{ this.Up(e);this.Left(e); \}, RightUp:function(e)\{ this.Up(e);this.Right(e); \}, LeftDown:function(e)\{ this.Left(e);this.Down(e); \}, RightDown:function(e)\{ this.Right(e);this.Down(e); \}, TurnDown:function(e)\{ this.\_obj.style.top = this.\_height+'px'; this.\_obj.style.height = e.clientY - this.\_height + 'px'; \}, TurnUp:function(e)\{ this.\_obj.style.top = e.clientY +'px'; this.\_obj.style.height = this.\_original\[3\] - e.clientY +'px'; \}, TurnRight:function(e)\{ this.\_obj.style.width = e.clientX- this.\_width +'px' \}, TurnLeft:function(e)\{ this.\_obj.style.left = e.clientX +'px' this.\_obj.style.width = this.\_original\[2\]-e.clientX+'px'; \} \}) var a = new Resize($('ss')); a.Set($('rUp'),'up'); a.Set($('rDown'),'down'); a.Set($('rLeft'),'left'); a.Set($('rRight'),'right'); a.Set($('rLeftUp'),'left-up'); a.Set($('rRightUp'),'right-up'); a.Set($('rLeftDown'),'left-down'); a.Set($('rRightDown'),'right-down'); </script>