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 /*獲取當(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)建一個新的可以拖拽的,變換大小的對象*/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,這兩個事件,當(dāng)mouseover的時候,去更改div的大小,當(dāng)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>
每個人都需要一臺速度更快、更穩(wěn)定的 PC。隨著時間的推移，垃圾文件、舊注冊表數(shù)據(jù)和不必要的后臺進(jìn)程會占用資源并降低性能。幸運的是，許多工具可以讓 Windows 保持平穩(wěn)運行。
廣告![ThinkPHP5快速開發(fā)企業(yè)站點[全程實錄]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
收藏
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://www.miracleart.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號
5788
