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='ss' 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 /*直接調(diào)用方法*/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 /*直接調(diào)用方法,并將事件的類型傳入作為第一個(gè)參數(shù)*/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 /*獲取當(dāng)前元素的屬性*/139 var CurrentStyle = function(element) {140 return element.currentStyle || document.defaultView.getComputedStyle(element, null);141 };142 /*事件監(jiān)聽,執(zhí)行對應(yīng)的函數(shù)*/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 /*創(chuàng)建一個(gè)新的可以拖拽的,變換大小的對象*/151 var Class = function(properties) {152 var _class = function() {153 return(arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? 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; //記錄觸發(fā)什么事件的索引 163 this.original = []; //記錄開始狀態(tài)的數(shù)組 164 this.width = null;165 this.height = null;166 this.fR = BindAsEventListener(this, this.resize); /*拖拽去更改div的大小*/167 this.fS = Bind(this, this.stop); /*停止移除監(jiān)聽的事件*/168 },169 set: function(elm, direction) {170 if(!elm) return;171 this.resizeelm = elm;172 /*點(diǎn)擊事件的監(jiān)聽,調(diào)用start函數(shù)去初始化數(shù)據(jù),監(jiān)聽mousemove和mouseup,這兩個(gè)事件,當(dāng)mouseover的時(shí)候,去更改div的大小,當(dāng)mouseup,去清除之前監(jiān)聽的兩個(gè)事件*/173 addListener(this.resizeelm, 'mousedown', 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, 'mouseup', this.fS);189 },190 resize: function(e) {191 this.fun(e);192 /*失去焦點(diǎn)的時(shí)候,調(diào)用this.stop去清除監(jiān)聽事件*/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(); /**清除選中的內(nèi)容*/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] + 'px',213 height: e.clientY - this.original[3] + 'px'214 }) : this.turnUp(e);215 },216 left: function(e) {217 e.clientX < this.width ? Css(this.obj, {218 left: e.clientX + 'px',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] + 'px',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 + 'px',247 height: e.clientY - this.height + 'px'248 });249 },250 turnUp: function(e) {251 Css(this.obj, {252 top: e.clientY + 'px',253 height: this.original[3] - e.clientY + 'px'254 });255 },256 turnRight: function(e) {257 Css(this.obj, {258 left: this.width + 'px',259 width: e.clientX - this.width + 'px'260 });261 },262 turnLeft: function(e) {263 Css(this.obj, {264 left: e.clientX + 'px',265 width: this.original[2] - e.clientX + 'px'266 });267 }268 });269 window.onload = function() {270 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');271 }272 </script>273 </body>274 275 </html>
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
Hei?e KI -Werkzeuge
Undress AI Tool
Ausziehbilder kostenlos
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!
Hei?er Artikel
Gras Wonder Build Guide | Uma Musume hübsches Derby
1 Monate vor
By Jack chen
<??>: 99 N?chte im Wald - alle Abzeichen und wie man sie freischalt
4 Wochen vor
By DDD
Rimworld Odyssey -Temperaturführer für Schiffe und Gravtech
3 Wochen vor
By Jack chen
Mejiro Ryan Build Guide | Uma Musume hübsches Derby
3 Wochen vor
By Jack chen
Rimworld odyssey wie man fischt
3 Wochen vor
By Jack chen
Hei?e Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
