<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0;
padding: 0
}
.h_box {
width: 300px;
height: 300px;
position: absolute;
top: 100px;
left: 100px;
}
/*四边*/
.h_box .t, .h_box .b, .h_box .l, .h_box .r {
position: absolute;
z-index: 1;
background: #666;
}
.h_box .l, .h_box .r {
width: 5px;
height: 100%;
cursor: col-resize;
}
.h_box .t, .h_box .b {
width: 100%;
height: 5px;
cursor: row-resize;
}
.h_box .t {
top: 0;
}
.h_box .b {
bottom: 0;
}
.h_box .l {
left: 0;
}
.h_box .r {
right: 0;
}
/*四角*/
.h_box .tl, .h_box .bl, .h_box .br, .h_box .tr {
width: 5px;
height: 5px;
position: absolute;
background: #fff;
border:1px solid #666;
z-index: 2;
cursor: nwse-resize
}
.h_box .tl, .h_box .bl {
left: 0px;
}
.h_box .tr, .h_box .br {
right: 0px;
}
.h_box .br, .h_box .bl {
bottom: 0px;
}
.h_box .tl, .h_box .tr {
top: 0px;
}
.h_box .tr, .h_box .bl {
cursor: nesw-resize;
}
/*å†…æ ¸*/
.inner {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- å°†è¾¹çº¿çš„ç¼©æ”¾ä¹ŸåŠ äº† -->
<div class="h_box" id="hbox">
<span class="h_drag_mark r" data-markname="r"></span><!-- å³è¾¹æ¡† -->
<span class="h_drag_mark l" data-markname="l"></span><!-- 左边框 -->
<span class="h_drag_mark t" data-markname="t"></span><!-- 上边框 -->
<span class="h_drag_mark b" data-markname="b"></span><!-- 下边框 -->
<span class="h_drag_mark br" data-markname="br"></span><!-- å³ä¸‹è§’ -->
<span class="h_drag_mark bl" data-markname="bl"></span><!-- 左下角 -->
<span class="h_drag_mark tr" data-markname="tr"></span><!-- å³ä¸Šè§’ -->
<span class="h_drag_mark tl" data-markname="tl"></span><!-- 左上角 -->
<div class="inner">
<iframe class="iframe_1" style="width: 100px; height: 100px;" frameborder="0" src="../../login.html"></iframe>
</div>
</div>
<script>
window.onload = function () {
// å¯ç¼©æ”¾å®¹å™¨
var hbox = document.getElementById("hbox");
// å¯æ‹–åŠ¨è¾¹ç¼˜æ ‡è®°å…ƒç´
var aSpan = document.getElementsByClassName("h_drag_mark");
// var aSpan = hbox.getElementsByTagName('span');
for (var i = 0; i < aSpan.length; i++) {
dragFn(aSpan[i]);
}
function dragFn(obj) {
// é¼ æ ‡æŒ‰ä¸‹æ—¶äº‹ä»¶
obj.onmousedown = function (ev) {
var oEv = ev || event;
oEv.stopPropagation(); // 防æ¢å†’泡事件
var oldWidth = hbox.offsetWidth; // 容器宽度
var oldHeight = hbox.offsetHeight; // 容器高度
var oldX = oEv.clientX; // é¼ æ ‡ä½ç½®xåæ ‡
var oldY = oEv.clientY; // é¼ æ ‡ä½ç½®yåæ ‡
var oldLeft = hbox.offsetLeft; // 容器原点xåæ ‡
var oldTop = hbox.offsetTop; // 容器原点yåæ ‡
// 移动到事件
document.onmousemove = function (ev) {
var oEv = ev || event;
// yè½´ä½ç§»é‡ï¼šå½“å‰é¼ æ ‡ä½ç½®-移动之å‰ä½ç½®(oEv.clientY - oldY)
// xè½´ä½ç§»é‡ï¼šå½“å‰é¼ æ ‡ä½ç½®-移动之å‰ä½ç½®(oEv.clientX - oldLeft)
let disY = (oldTop + (oEv.clientY - oldY)), //
disX = (oldLeft + (oEv.clientX - oldLeft));
if(disX>oldLeft+oldWidth){
disX=oldLeft+oldWidth
}
if(disY>oldTop+oldHeight){
disY=oldTop+oldHeight
}
if (obj.dataset.markname == 'tl') {
hbox.style.width = oldWidth - (oEv.clientX - oldX) + 'px';
hbox.style.height = oldHeight - (oEv.clientY - oldY) + 'px';
hbox.style.left = disX + 'px';
hbox.style.top = disY + 'px';
}
else if (obj.dataset.markname == 'bl') {
hbox.style.width = oldWidth - (oEv.clientX - oldX) + 'px';
hbox.style.height = oldHeight + (oEv.clientY - oldY) + 'px';
hbox.style.left = disX + 'px';
hbox.style.bottom = oldTop + (oEv.clientY + oldY) + 'px';
}
else if (obj.dataset.markname == 'tr') {
hbox.style.width = oldWidth + (oEv.clientX - oldX) + 'px';
hbox.style.height = oldHeight - (oEv.clientY - oldY) + 'px';
hbox.style.right = oldLeft - (oEv.clientX - oldX) + 'px';
hbox.style.top = disY + 'px';
}
else if (obj.dataset.markname == 'br') {
hbox.style.width = oldWidth + (oEv.clientX - oldX) + 'px';
hbox.style.height = oldHeight + (oEv.clientY - oldY) + 'px';
hbox.style.right = oldLeft - (oEv.clientX - oldX) + 'px';
hbox.style.bottom = oldTop + (oEv.clientY + oldY) + 'px';
}
else if (obj.dataset.markname == 't') {
hbox.style.height = oldHeight - (oEv.clientY - oldY) + 'px';
hbox.style.top = disY + 'px';
}
else if (obj.dataset.markname == 'b') {
hbox.style.height = oldHeight + (oEv.clientY - oldY) + 'px';
hbox.style.bottom = disY + 'px';
}
else if (obj.dataset.markname == 'l') {
hbox.style.height = oldHeight + 'px';
hbox.style.width = oldWidth - (oEv.clientX - oldX) + 'px';
hbox.style.left = disX + 'px';
}
else if (obj.dataset.markname == 'r') {
hbox.style.height = oldHeight + 'px';
hbox.style.width = oldWidth + (oEv.clientX - oldX) + 'px';
hbox.style.right = disX + 'px';
}
};
// é¼ æ ‡æ¾å¼€æ—¶äº‹ä»¶
document.onmouseup = function () {
document.onmousemove = null;
};
return false;
};
}
// é¼ æ ‡æŒ‰ä¸‹æ—¶äº‹ä»¶
document.getElementById("hbox").onmousedown = function (ev) {
var oevent = ev || event;
oevent.preventDefault(); // 阻æ¢é»˜è®¤è¡Œä¸º
var distanceX = oevent.clientX - hbox.offsetLeft;
var distanceY = oevent.clientY - hbox.offsetTop;
// 移动到事件
document.onmousemove = function (ev) {
var oevent = ev || event;
hbox.style.left = oevent.clientX - distanceX + 'px';
hbox.style.top = oevent.clientY - distanceY + 'px';
};
// é¼ æ ‡æ¾å¼€æ—¶äº‹ä»¶
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
};
}
};
</script>
</body>
</html>