div八点大小改变

scomouse

浏览: 14686 次
性别:
来自: 广州

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (67)

社区版块

存档分类

依旧是学习的别人的,模仿的(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.onblur=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>

分享到：