Ziehen und ablegen, um die Größe des Divs zu ändern-java类库-php.cn

Heim

类库下载

java类库

Ziehen und ablegen, um die Größe des Divs zu ändern

高洛峰

Oct 08, 2016 pm 01:51 PM

     1 <!DOCTYPE html>  2 <html>  3   4     <head>  5         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  6         <title>Resize</title>  7         <style type="text/css">  8             #rRightDown,  9             #rLeftDown, 10             #rLeftUp, 11             #rRightUp, 12             #rRight, 13             #rLeft, 14             #rUp, 15             #rDown { 16                 position: absolute; 17                 background: #C00; 18                 width: 6px; 19                 height: 6px; 20                 z-index: 5; 21                 font-size: 0; 22             } 23              24             #rRight { 25                 width: 15px 26             } 27              28             #rLeftDown, 29             #rRightUp { 30                 cursor: ne-resize; 31             } 32              33             #rRightDown, 34             #rLeftUp { 35                 cursor: nw-resize; 36             } 37              38             #rRight, 39             #rLeft { 40                 cursor: e-resize; 41             } 42              43             #rUp, 44             #rDown { 45                 cursor: n-resize; 46             } 47              48             #rRightDown { 49                 bottom: -3px; 50                 right: -3px; 51             } 52              53             #rLeftDown { 54                 bottom: -3px; 55                 left: -3px; 56             } 57              58             #rRightUp { 59                 top: -3px; 60                 right: -3px; 61             } 62              63             #rLeftUp { 64                 top: -3px; 65                 left: -3px; 66             } 67              68             #rRight { 69                 right: -3px; 70                 top: 50% 71             } 72              73             #rLeft { 74                 left: -3px; 75                 top: 50% 76             } 77              78             #rUp { 79                 top: -3px; 80                 left: 50% 81             } 82              83             #rDown { 84                 bottom: -3px; 85                 left: 50% 86             } 87         </style> 88     </head> 89  90     <body> 91         <div id=&#39;ss&#39; style="height:100px; width:100px; border:1px solid #000000; position:absolute; left:200px; top:200px;"> 92             <div id="rRightDown"> </div> 93             <div id="rLeftDown"> </div> 94             <div id="rRightUp"> </div> 95             <div id="rLeftUp"> </div> 96             <div id="rRight"> </div> 97             <div id="rLeft"> </div> 98             <div id="rUp"> </div> 99             <div id="rDown"></div>100         </div>101         <script>102             var Sys = (function(ua) {103                 var s = {};104                 s.IE = ua.match(/msie ([\d.]+)/) ? true : false;105                 s.Firefox = ua.match(/firefox\/([\d.]+)/) ? true : false;106                 s.Chrome = ua.match(/chrome\/([\d.]+)/) ? true : false;107                 s.IE6 = (s.IE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6)) ? true : false;108                 s.IE7 = (s.IE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 7)) ? true : false;109                 s.IE8 = (s.IE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 8)) ? true : false;110                 return s;111             })(navigator.userAgent.toLowerCase()); /*判断是哪一种浏览器,火狐,谷歌,ie*/112             var $ = function(id) {113                 return document.getElementById(id);114             }; /*获取元素,模仿jQuery*/115             var Css = function(e, o) { /*更改对象的top,left,width,height来控制对象的大小*/116                 for(var i in o)117                     e.style[i] = o[i];118             };119             var Extend = function(destination, source) { /*拷贝对象的属性*/120                 for(var property in source) {121                     destination[property] = source[property];122                 }123             };124             /*直接调用方法*/125             var Bind = function(object, fun) {126                 var args = Array.prototype.slice.call(arguments).slice(2);127                 return function() {128                     return fun.apply(object, args);129                 }130             };131             /*直接调用方法,并将事件的类型传入作为第一个参数*/132             var BindAsEventListener = function(object, fun) {133                 var args = Array.prototype.slice.call(arguments).slice(2);134                 return function(event) {135                     return fun.apply(object, [event || window.event].concat(args));136                 }137             };138             /*获取当前元素的属性*/139             var CurrentStyle = function(element) {140                 return element.currentStyle || document.defaultView.getComputedStyle(element, null);141             };142             /*事件监听,执行对应的函数*/143             function addListener(element, e, fn) {144                 element.addEventListener ? element.addEventListener(e, fn, false) : element.attachEvent("on" + e, fn);145             };146             /*事件的移除*/147             function removeListener(element, e, fn) {148                 element.removeEventListener ? element.removeEventListener(e, fn, false) : element.detachEvent("on" + e, fn)149             };150             /*创建一个新的可以拖拽的,变换大小的对象*/151             var Class = function(properties) {152                 var _class = function() {153                     return(arguments[0] !== null && this.initialize && typeof(this.initialize) == &#39;function&#39;) ? this.initialize.apply(this, arguments) : this;154                 };155                 _class.prototype = properties;156                 return _class;157             };158             var Resize = new Class({159                 initialize: function(obj) {160                     this.obj = obj;161                     this.resizeelm = null;162                     this.fun = null; //记录触发什么事件的索引   163                     this.original = []; //记录开始状态的数组   164                     this.width = null;165                     this.height = null;166                     this.fR = BindAsEventListener(this, this.resize); /*拖拽去更改div的大小*/167                     this.fS = Bind(this, this.stop); /*停止移除监听的事件*/168                 },169                 set: function(elm, direction) {170                     if(!elm) return;171                     this.resizeelm = elm;172                     /*点击事件的监听,调用start函数去初始化数据,监听mousemove和mouseup,这两个事件,当mouseover的时候,去更改div的大小,当mouseup,去清除之前监听的两个事件*/173                     addListener(this.resizeelm, &#39;mousedown&#39;, BindAsEventListener(this, this.start, this[direction]));174                     return this;175                 },176                 start: function(e, fun) {177                     this.fun = fun;178                     this.original = [parseInt(CurrentStyle(this.obj).width), parseInt(CurrentStyle(this.obj).height), parseInt(CurrentStyle(this.obj).left), parseInt(CurrentStyle(this.obj).top)];179                     console.log({180                         width: this.original[0],181                         height: this.original[1],182                         left: this.original[2],183                         top: this.original[3]184                     });185                     this.width = (this.original[2] || 0) + this.original[0];186                     this.height = (this.original[3] || 0) + this.original[1];187                     addListener(document, "mousemove", this.fR);188                     addListener(document, &#39;mouseup&#39;, this.fS);189                 },190                 resize: function(e) {191                     this.fun(e);192                     /*失去焦点的时候,调用this.stop去清除监听事件*/193                     Sys.IE ? (this.resizeelm.onlosecapture = function() {194                         this.fS();195                     }) : (this.resizeelm.onblur = function() {196                         this.fS();197                     })198                 },199                 stop: function() {200                     removeListener(document, "mousemove", this.fR);201                     removeListener(document, "mousemove", this.fS);202                     window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); /**清除选中的内容*/203                 },204                 up: function(e) {205                     this.height > e.clientY ? Css(this.obj, {206                         top: e.clientY + "px",207                         height: this.height - e.clientY + "px"208                     }) : this.turnDown(e);209                 },210                 down: function(e) {211                     e.clientY > this.original[3] ? Css(this.obj, {212                         top: this.original[3] + &#39;px&#39;,213                         height: e.clientY - this.original[3] + &#39;px&#39;214                     }) : this.turnUp(e);215                 },216                 left: function(e) {217                     e.clientX < this.width ? Css(this.obj, {218                         left: e.clientX + &#39;px&#39;,219                         width: this.width - e.clientX + "px"220                     }) : this.turnRight(e);221                 },222                 right: function(e) {223                     e.clientX > this.original[2] ? Css(this.obj, {224                         left: this.original[2] + &#39;px&#39;,225                         width: e.clientX - this.original[2] + "px"226                     }) : this.turnLeft(e);227                 },228                 leftUp: function(e) {229                     this.up(e);230                     this.left(e);231                 },232                 leftDown: function(e) {233                     this.left(e);234                     this.down(e);235                 },236                 rightUp: function(e) {237                     this.up(e);238                     this.right(e);239                 },240                 rightDown: function(e) {241                     this.right(e);242                     this.down(e);243                 },244                 turnDown: function(e) {245                     Css(this.obj, {246                         top: this.height + &#39;px&#39;,247                         height: e.clientY - this.height + &#39;px&#39;248                     });249                 },250                 turnUp: function(e) {251                     Css(this.obj, {252                         top: e.clientY + &#39;px&#39;,253                         height: this.original[3] - e.clientY + &#39;px&#39;254                     });255                 },256                 turnRight: function(e) {257                     Css(this.obj, {258                         left: this.width + &#39;px&#39;,259                         width: e.clientX - this.width + &#39;px&#39;260                     });261                 },262                 turnLeft: function(e) {263                     Css(this.obj, {264                         left: e.clientX + &#39;px&#39;,265                         width: this.original[2] - e.clientX + &#39;px&#39;266                     });267                 }268             });269             window.onload = function() {270                 new Resize($(&#39;ss&#39;)).set($(&#39;rUp&#39;), &#39;up&#39;).set($(&#39;rDown&#39;), &#39;down&#39;).set($(&#39;rLeft&#39;), &#39;left&#39;).set($(&#39;rRight&#39;), &#39;right&#39;).set($(&#39;rLeftUp&#39;), &#39;leftUp&#39;).set($(&#39;rLeftDown&#39;), &#39;leftDown&#39;).set($(&#39;rRightDown&#39;), &#39;rightDown&#39;).set($(&#39;rRightUp&#39;), &#39;rightUp&#39;);271             }272         </script>273     </body>274 275 </html>

Nach dem Login kopieren

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn