- <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <HTML xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="content-type" content="text/html;charset=utf-8">
- <title>
- JS 控制 div 缩放移动
- </title>
- <style type="text/css">
- *{margin:0;padding:0;} #www_ablanuxe_com{ width:100%; height:100%; background:#f00;
- filter:alpha(opacity:0); opacity:0; z-index:9999; position:absolute; top:0;
- left:0; display:none; } #ablanuxe_com_2{ width:200px; height:200px; position:relative;
- background:#EEEEEE; border:1px solid #f00; display: none; } /*S*/ #www_ablanuxe_com_1,#www_ablanuxe_com_2,#www_ablanuxe_com_3,#www_ablanuxe_com_4{
- width:15px; height:15px; background:#99CC00; position:absolute; right:0px;
- bottom:0px; cursor:nw-resize; overflow:hidden; font-size:12px; text-align:center;
- line-height:15px; color:#FFFFFF; float:right; z-index:3; } #www_ablanuxe_com_1{
- left: 0; top: 0; } #www_ablanuxe_com_2{ right: 0; top: 0; cursor: ne-resize;
- } #www_ablanuxe_com_3{ left: 0; bottom: 0; cursor: ne-resize; } #top,#left,#right,#bottom{
- background: #f00; position: absolute; cursor: n-resize; overflow: hidden;
- filter: alpha(opacity:0); opacity: 1; z-index: 1; } #top{ width: 10px;
- height: 10px; top: 0; left: 50%; } #left{ width: 10px; height: 10px; left:
- 0; top: 50%; cursor:e-resize; } #right{ width: 10px; height: 10px; right:0;
- top:50%; cursor:e-resize; } #bottom{ width: 10px; height: 10px; left:50%;
- bottom:0; } /*E*/ #ablanuxe_com_2 p{ padding:10px; line-height:24px; font-size:13px;
- text-indent:24px; color:#996600; } #ablanuxe_com_2 h2{ width:100%; height:25px;
- line-height:25px; font-size:14px; background:#CC9900; color:#FFFFFF; text-indent:15px;
- cursor:move; overflow:hidden; }
- </style>
- <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
- </script>
- <script type="text/javascript">
- $(function() {
- $("#ablanuxe_com_2").CSS({
- "width": 200 + "px",
- "height": 200 + "px"
- }) $("#ablanuxe_com_2").show();
- })
- </script>
- <script>
- Windows.onload = function() {
- var oDiv = document.getElementById("www_ablanuxe_com_4");
- var oDiv2 = document.getElementById("ablanuxe_com_2");
- var zhezhao = document.getElementById("www_ablanuxe_com");
- var h2 = oDiv2.getElementsByTagName("h2")[0];
- var top = document.getElementById("top");
- var left = document.getElementById("left");
- var right = document.getElementById("right");
- var bottom = document.getElementById("bottom");
- var mouseStart = {};
- var divStart = {};
- var topStart = {};
- var leftStart = {};
- var rightStart = {};
- var bottomStart = {};
- var new_width = document.getElementById("showwidth");
- var new_height = document.getElementById("showheight");
- //left
- left.onmousedown = function(ev) {
- //console.log($(oDiv2).width());
- var oEvent = ev || event;
- mouseStart.x = oEvent.clientX;
- mouseStart.y = oEvent.clientY;
- //console.log(oDiv2.style.width);
- leftStart.x = left.offsetLeft;
- //console.log(left.offsetLeft);
- divStart.width = parseInt(oDiv2.style.width);
- if (left.setCapture) {
- left.onmousemove = doDragLeft;
- left.onmouseup = stopDragLeft;
- left.setCapture();
- } else {
- document.addEventListener("mousemove", doDragLeft, true);
- document.addEventListener("mouseup", stopDragLeft, true);
- }
- };
- function doDragLeft(ev) {
- var oEvent = ev || event;
- var l = divStart.width - (oEvent.clientX - mouseStart.x);
- var w = l + oDiv.offsetWidth;
- //console.log(w);
- if (w < oDiv.offsetWidth) {
- w = oDiv.offsetWidth;
- return;
- } else if (w > document.documentElement.clientWidth - oDiv2.offsetLeft) {
- w = document.documentElement.clientWidth - oDiv2.offsetLeft - 2;
- }
- oDiv2.style.width = w + "px";
- oDiv2.style.left = oEvent.clientX + "px";
- //new_width.value=w;
- }
- function stopDragLeft() {
- if (left.releaseCapture) {
- left.onmousemove = null;
- left.onmouseup = null;
- left.releaseCapture();
- } else {
- document.removeEventListener("mousemove", doDragLeft, true);
- document.removeEventListener("mouseup", stopDragLeft, true);
- }
- }
- // 往右拽
- right.onmousedown = function(ev) {
- var oEvent = ev || event;
- mouseStart.x = oEvent.clientX;
- mouseStart.y = oEvent.clientY;
- rightStart.x = right.offsetLeft;
- //console.log(mouseStart);
- if (right.setCapture) {
- right.onmousemove = doDragRight;
- right.onmouseup = stopDragRight;
- right.setCapture();
- } else {
- document.addEventListener("mousemove", doDragRight, true);
- document.addEventListener("mouseup", stopDragRight, true);
- }
- };
- function doDragRight(ev) {
- var oEvent = ev || event;
- var l = oEvent.clientX - mouseStart.x + rightStart.x;
- var w = l + oDiv.offsetWidth;
- //console.log(w);
- if (w < oDiv.offsetWidth) {
- w = oDiv.offsetWidth;
- } else if (w > document.documentElement.clientWidth - oDiv2.offsetLeft) {
- w = document.documentElement.clientWidth - oDiv2.offsetLeft - 2;
- }
- oDiv2.style.width = w + "px";
- //new_width.value=w;
- };
- function stopDragRight() {
- if (right.releaseCapture) {
- right.onmousemove = null;
- right.onmouseup = null;
- right.releaseCapture();
- } else {
- document.removeEventListener("mousemove", doDragRight, true);
- document.removeEventListener("mouseup", stopDragRight, true);
- }
- };
- // 往上拽
- top.onmousedown = function(ev) {
- var oEvent = ev || event;
- mouseStart.x = oEvent.clientX;
- mouseStart.y = oEvent.clientY;
- topStart.y = top.offsetTop;
- divStart.height = parseInt(oDiv2.style.height);
- if (top.setCapture) {
- top.onmousemove = doDragTop;
- top.onmouseup = stopDragTop;
- top.setCapture();
- } else {
- document.addEventListener("mousemove", doDragTop, true);
- document.addEventListener("mouseup", stopDragTop, true);
- }
- };
- function doDragTop(ev) {
- var oEvent = ev || event;
- //var t=oEvent.clientY-mouseStart.y+topStart.y;
- var t = divStart.height - (oEvent.clientY - mouseStart.y) var h = t + oDiv.offsetHeight;
- //console.log(h);
- if (h < oDiv.offsetHeight) {
- h = oDiv.offsetHeight;
- return;
- } else if (h > document.documentElement.clientHeight - oDiv2.offsetTop) {
- h = document.documentElement.clientHeight - oDiv2.offsetTop - 2;
- }
- oDiv2.style.height = h + "px";
- oDiv2.style.top = oEvent.clientY + "px";
- // new_height.value=h;
- };
- function stopDragTop() {
- if (top.releaseCapture) {
- top.onmousemove = null;
- top.onmouseup = null;
- top.releaseCapture();
- } else {
- document.removeEventListener("mousemove", doDragTop, true);
- document.removeEventListener("mouseup", stopDragTop, true);
- }
- };
- // 往下拽
- bottom.onmousedown = function(ev) {
- var oEvent = ev || event;
- mouseStart.x = oEvent.clientX;
- mouseStart.y = oEvent.clientY;
- bottomStart.y = bottom.offsetTop;
- if (bottom.setCapture) {
- bottom.onmousemove = doDragBottom;
- bottom.onmouseup = stopDragBottom;
- bottom.setCapture();
- } else {
- document.addEventListener("mousemove", doDragBottom, true);
- document.addEventListener("mouseup", stopDragBottom, true);
- }
- };
- function doDragBottom(ev) {
- var oEvent = ev || event;
- var t = oEvent.clientY - mouseStart.y + bottomStart.y;
- var h = t + oDiv.offsetHeight;
- if (h < oDiv.offsetHeight) {
- h = oDiv.offsetHeight;
- } else if (h > document.documentElement.clientHeight - oDiv2.offsetTop) {
- h = document.documentElement.clientHeight - oDiv2.offsetTop - 2;
- }
- oDiv2.style.height = h + "px";
- // new_height.value=h;
- };
- function stopDragBottom() {
- if (bottom.releaseCapture) {
- bottom.onmousemove = null;
- bottom.onmouseup = null;
- bottom.releaseCapture();
- } else {
- document.removeEventListener("mousemove", doDragBottom, true);
- document.removeEventListener("mouseup", stopDragBottom, true);
- }
- };
- // 往左右同时拽
- oDiv.onmousedown = function(ev) {
- var oEvent = ev || event;
- mouseStart.x = oEvent.clientX;
- mouseStart.y = oEvent.clientY;
- divStart.x = oDiv.offsetLeft;
- divStart.y = oDiv.offsetTop;
- if (oDiv.setCapture) {
- oDiv.onmousemove = doDrag;
- oDiv.onmouseup = stopDrag;
- oDiv.setCapture();
- } else {
- document.addEventListener("mousemove", doDrag, true);
- document.addEventListener("mouseup", stopDrag, true);
- }
- zhezhao.style.display = 'block';
- };
- function doDrag(ev) {
- var oEvent = ev || event;
- var l = oEvent.clientX - mouseStart.x + divStart.x;
- var t = oEvent.clientY - mouseStart.y + divStart.y;
- var w = l + oDiv.offsetWidth;
- var h = t + oDiv.offsetHeight;
- if (w < oDiv.offsetWidth) {
- w = oDiv.offsetWidth;
- } else if (w > document.documentElement.clientWidth - oDiv2.offsetLeft) {
- w = document.documentElement.clientWidth - oDiv2.offsetLeft - 2;
- }
- if (h < oDiv.offsetHeight) {
- h = oDiv.offsetHeight;
- } else if (h > document.documentElement.clientHeight - oDiv2.offsetTop) {
- h = document.documentElement.clientHeight - oDiv2.offsetTop - 2;
- }
- oDiv2.style.width = w + "px";
- oDiv2.style.height = h + "px";
- };
- function stopDrag() {
- if (oDiv.releaseCapture) {
- oDiv.onmousemove = null;
- oDiv.onmouseup = null;
- oDiv.releaseCapture();
- } else {
- document.removeEventListener("mousemove", doDrag, true);
- document.removeEventListener("mouseup", stopDrag, true);
- }
- zhezhao.style.display = 'none';
- };
- //h2 完美拖拽
- h2.onmousedown = function(ev) {
- var oEvent = ev || event;
- mouseStart.x = oEvent.clientX;
- mouseStart.y = oEvent.clientY;
- divStart.x = oDiv2.offsetLeft;
- divStart.y = oDiv2.offsetTop;
- if (h2.setCapture) {
- h2.onmousemove = doDrag3;
- h2.onmouseup = stopDrag3;
- h2.setCapture();
- } else {
- document.addEventListener("mousemove", doDrag3, true);
- document.addEventListener("mouseup", stopDrag3, true);
- }
- zhezhao.style.display = 'block';
- };
- function doDrag3(ev) {
- var oEvent = ev || event;
- var l = oEvent.clientX - mouseStart.x + divStart.x;
- var t = oEvent.clientY - mouseStart.y + divStart.y;
- if (l < 0) {
- l = 0;
- } else if (l > document.documentElement.clientWidth - oDiv2.offsetWidth) {
- l = document.documentElement.clientWidth - oDiv2.offsetWidth;
- }
- if (t < 0) {
- t = 0;
- } else if (t > document.documentElement.clientHeight - oDiv2.offsetHeight) {
- t = document.documentElement.clientHeight - oDiv2.offsetHeight;
- }
- oDiv2.style.left = l + "px";
- oDiv2.style.top = t + "px";
- };
- function stopDrag3() {
- if (h2.releaseCapture) {
- h2.onmousemove = null;
- h2.onmouseup = null;
- h2.releaseCapture();
- } else {
- document.removeEventListener("mousemove", doDrag3, true);
- document.removeEventListener("mouseup", stopDrag3, true);
- }
- zhezhao.style.display = 'none';
- }
- };
- </script>
- </head>
- <body>
- <div id="ablanuxe_com_2">
- <div style="width:100%;height:100%;overflow:hidden;">
- <h2>
- 我是标题行
- </h2>
- <p>
- 我是内容内容我是内容内容我是内容内容我是内容内容我是内容内容我是内容内容我是内容内容我是内容内容我是内容内容我是内容内容我是内容内容我是内容内容我是内容内容我是内容内容我是内容内容我是内容内容我是内容内容我是内容内容我是内容内容
- </p>
- <div class="dragDiv">
- <div id="top">
- </div>
- <div id="left">
- </div>
- <div id="right">
- </div>
- <div id="bottom">
- </div>
- <div id="www_ablanuxe_com_1">
- 拖
- </div>
- <div id="www_ablanuxe_com_2">
- 拖
- </div>
- <div id="www_ablanuxe_com_3">
- 拖
- </div>
- <div id="www_ablanuxe_com_4">
- 拖
- </div>
- </div>
- </div>
- </div>
- <div id="www_ablanuxe_com">
- </div>
- </body>
- </HTML>
来源: http://www.qdfuns.com/article/16039/f8b160d23aaf9ef2d7bcb7346d74657c.html