js通过八个点 拖动改变div大小的实现方法

  1. <html>   
  2. <head>   
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  4. <title>Resize</title>   
  5. <style type="text/css">   
  6. #rRightDown,#rLeftDown,#rLeftUp,#rRightUp,#rRight,#rLeft,#rUp,#rDown{   
  7. position:absolute;background:#C00;width:6px;height:6px;z-index:5;font-size:0;}   
  8. #rLeftDown,#rRightUp{cursor:ne-resize;}   
  9. #rRightDown,#rLeftUp{cursor:nw-resize;}   
  10. #rRight,#rLeft{cursor:e-resize;}   
  11. #rUp,#rDown{cursor:n-resize;}   
  12. #rRightDown{ bottom:-3px; right:-3px;}   
  13. #rLeftDown{ bottom:-3px; left:-3px;}   
  14. #rRightUp{ top:-3px; right:-3px;}   
  15. #rLeftUp{ top:-3px; left:-3px;}   
  16. #rRight{ right:-3px; top:50%}   
  17. #rLeft{ left:-3px; top:50%}   
  18. #rUp{ top:-3px; left:50%}   
  19. #rDown{ bottom:-3px; left:50%}   
  20. </style>   
  21. </head>   
  22. <body>   
  23. <div id='ss' style="height:100px; width:100px; border:1px solid #000000; position:absolute; left:200px; top:200px;" >   
  24. <div id="rRightDown"> </div>   
  25. <div id="rLeftDown"> </div>   
  26. <div id="rRightUp"> </div>   
  27. <div id="rLeftUp"> </div>   
  28. <div id="rRight"> </div>   
  29. <div id="rLeft"> </div>   
  30. <div id="rUp"> </div>   
  31. <div id="rDown"></div>   
  32. </div>   
  33. <script>   
  34. var Sys = (function(ua){   
  35.     var s = {};   
  36.     s.IE = ua.match(/msie ([\d.]+)/)?true:false;   
  37.     s.Firefox = ua.match(/firefox\/([\d.]+)/)?true:false;   
  38.     s.Chrome = ua.match(/chrome\/([\d.]+)/)?true:false;   
  39.     s.IE6 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6))?true:false;   
  40.     s.IE7 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 7))?true:false;   
  41.     s.IE8 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 8))?true:false;   
  42.     return s;   
  43. })(navigator.userAgent.toLowerCase());  
  44. var $ = function (id) {   
  45.     return document.getElementById(id);   
  46. };  
  47. var Css = function(e,o){   
  48.     for(var i in o)   
  49.     e.style[i] = o[i];   
  50. };  
  51. var Extend = function(destination, source) {   
  52.     for (var property in source) {   
  53.         destination[property] = source[property];   
  54.     }   
  55. };  
  56. var Bind = function(object, fun) {   
  57.     var args = Array.prototype.slice.call(arguments).slice(2);   
  58.     return function() {   
  59.         return fun.apply(object, args);   
  60.     }   
  61. };  
  62. var BindAsEventListener = function(object, fun) {   
  63.     var args = Array.prototype.slice.call(arguments).slice(2);   
  64.     return function(event) {   
  65.         return fun.apply(object, [event || window.event].concat(args));   
  66.     }   
  67. };  
  68. var CurrentStyle = function(element){   
  69.     return element.currentStyle || document.defaultView.getComputedStyle(element, null);   
  70. };  
  71. function addListener(element,e,fn){   
  72.     element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn);   
  73. };   
  74. function removeListener(element,e,fn){   
  75.     element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)   
  76. };  
  77. var Class = function(properties){   
  78.     var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;};   
  79.     _class.prototype = properties;   
  80.     return _class;   
  81. };  
  82. var Resize =new Class({   
  83.     initialize : function(obj){   
  84.         this.obj = obj;   
  85.         this.resizeelm = null;   
  86.         this.fun = null; //记录触发什么事件的索引   
  87.         this.original = []; //记录开始状态的数组   
  88.         this.width = null;   
  89.         this.height = null;   
  90.         this.fR = BindAsEventListener(this,this.resize);   
  91.         this.fS = Bind(this,this.stop);       
  92.     },   
  93.     set : function(elm,direction){   
  94.         if(!elm)return;   
  95.         this.resizeelm = elm;   
  96.         addListener(this.resizeelm,'mousedown',BindAsEventListener(this, this.start, this[direction]));   
  97.         return this;   
  98.     },   
  99.     start : function(e,fun){   
  100.         this.fun = fun;   
  101.         this.original = [parseInt(CurrentStyle(this.obj).width),parseInt(CurrentStyle(this.obj).height),parseInt(CurrentStyle(this.obj).left),parseInt(CurrentStyle(this.obj).top)];  
  102.         this.width = (this.original[2]||0) + this.original[0];   
  103.         this.height = (this.original[3]||0) + this.original[1];   
  104.         addListener(document,"mousemove",this.fR);   
  105.         addListener(document,'mouseup',this.fS);   
  106.     },   
  107.     resize : function(e){   
  108.         this.fun(e);   
  109.         Sys.IE?(this.resizeelm.onlosecapture=function(){this.fS()}):(this.resizeelm.onblur=function(){this.fS()})   
  110.     },   
  111.     stop : function(){   
  112.         removeListener(document, "mousemove", this.fR);   
  113.         removeListener(document, "mousemove", this.fS);   
  114.         window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();       
  115.     },   
  116.     up : function(e){   
  117.         this.height>e.clientY?Css(this.obj,{top:e.clientY + "px",height:this.height-e.clientY + "px"}):this.turnDown(e);   
  118.     },   
  119.     down : function(e){   
  120.         e.clientY>this.original[3]?Css(this.obj,{top:this.original[3]+'px',height:e.clientY-this.original[3]+'px'}):this.turnUp(e);       
  121.     },   
  122.     left : function(e){   
  123.         e.clientX<this.width?Css(this.obj,{left:e.clientX +'px',width:this.width-e.clientX + "px"}):this.turnRight(e);           
  124.     },   
  125.     right : function(e){   
  126.         e.clientX>this.original[2]?Css(this.obj,{left:this.original[2]+'px',width:e.clientX-this.original[2]+"px"}):this.turnLeft(e)    ;   
  127.     },   
  128.     leftUp:function(e){   
  129.         this.up(e);this.left(e);   
  130.     },   
  131.     leftDown:function(e){   
  132.         this.left(e);this.down(e);   
  133.     },   
  134.     rightUp:function(e){   
  135.         this.up(e);this.right(e);   
  136.     },   
  137.     rightDown:function(e){   
  138.         this.right(e);this.down(e);   
  139.     },                   
  140.     turnDown : function(e){   
  141.         Css(this.obj,{top:this.height+'px',height:e.clientY - this.height + 'px'});   
  142.     },   
  143.     turnUp : function(e){   
  144.         Css(this.obj,{top : e.clientY +'px',height : this.original[3] - e.clientY +'px'});   
  145.     },   
  146.     turnRight : function(e){   
  147.         Css(this.obj,{left:this.width+'px',width:e.clientX- this.width +'px'});   
  148.     },   
  149.     turnLeft : function(e){   
  150.         Css(this.obj,{left:e.clientX +'px',width:this.original[2]-e.clientX+'px'});            
  151.     }           
  152. });   
  153. window.onload = function(){   
  154.     new Resize($('ss')).set($('rUp'),'up').set($('rDown'),'down').set($('rLeft'),'left').set($('rRight'),'right').set($('rLeftUp'),'leftUp').set($('rLeftDown'),'leftDown').set($('rRightDown'),'rightDown').set($('rRightUp'),'rightUp');  
  155. }   
  156. </script>   
  157. </body>   
  158. </html>  
posted @ 2016-09-13 14:12  我爱吃小丸子  阅读(609)  评论(0)  编辑  收藏  举报