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)用方法,并將事件的類型傳入作為第一個參數(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 /*獲取當前元素的屬性*/139 var CurrentStyle = function(element) {140 return element.currentStyle || document.defaultView.getComputedStyle(element, null);141 };142 /*事件監(jiān)聽,執(zhí)行對應的函數(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)建一個新的可以拖拽的,變換大小的對象*/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 /*點擊事件的監(jiān)聽,調(diào)用start函數(shù)去初始化數(shù)據(jù),監(jiān)聽mousemove和mouseup,這兩個事件,當mouseover的時候,去更改div的大小,當mouseup,去清除之前監(jiān)聽的兩個事件*/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à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>
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Guide: Stellar Blade Save File Location/Save File Lost/Not Saving
4 weeks ago
By DDD
Oguri Cap Build Guide | A Pretty Derby Musume
2 weeks ago
By Jack chen
Agnes Tachyon Build Guide | A Pretty Derby Musume
2 weeks ago
By Jack chen
Dune: Awakening - Advanced Planetologist Quest Walkthrough
4 weeks ago
By Jack chen
Date Everything: Dirk And Harper Relationship Guide
4 weeks ago
By Jack chen
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
