搜索
首页类库下载java类库拖拽改变div的大小

拖拽改变div的大小

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>

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)