<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="UTF-8">
|
<title>大小拖拽缩放</title>
|
<style>
|
* {
|
margin: 0;
|
padding: 0
|
}
|
.h_box {
|
width: 100vw;
|
height: 100vh;
|
position: absolute;
|
top: 0px;
|
left: 0px;
|
}
|
/*四边*/
|
.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 {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
}
|
.iframe_1 {
|
position: absolute;
|
top: 0px;
|
left: 0px;
|
/* width: 100%; height: 100%; */
|
transform-origin: left top;
|
transform: scale(13%);
|
}
|
</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="" frameborder="0" src="../../login.html"></iframe>
|
</div>
|
</div>
|
<script>
|
var iframe_1, document_width, document_height
|
|
window.onload = function () {
|
document_width = document.documentElement.clientWidth;
|
document_height = document.documentElement.clientHeight;
|
iframe_1 = document.getElementsByClassName("iframe_1");
|
iframe_1[0].style.width = document_width + "px";
|
iframe_1[0].style.height = document_height + "px";
|
|
// 可缩放容器
|
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;
|
|
var hbox_ = document.getElementById("hbox");
|
var box_width = hbox_.offsetWidth;
|
var box_height = hbox_.offsetHeight;
|
|
var scale_width_ = box_width / document_width; // 分母——设计稿的分辨率
|
var scale_height_ = box_height / document_height; // 分母——设计稿的分辨率
|
var scale_wh_min = scale_width_ > scale_height_ ? scale_height_ : scale_width_; // 选择小的倍率
|
scale_width = scale_wh_min;
|
scale_height = scale_wh_min;
|
var scale_ = 'scale(' + scale_width + ',' + scale_height + ')'
|
|
iframe_1[0].style.transform = scale_
|
};
|
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>
|
