没什么知识量我直接放代码你们看着参考
效果预览:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js实现div内拖拽缩放</title>
<script src="jquery/1.11.3/jquery.min.js"></script>
<style>
#slider,#slider2 {
width:100px;
height:100px;
cursor:pointer;
position:absolute;
}
#slider {
background:#FF7800;
}
#slider img {
width:100%;
height:100%;
}
#slider2 {
background:#0000FF;
}
#box {
width:960px;
height:540px;
border:1px solid #000000;
position:relative;
top:10px;
left:10px;
}
#div1 {
width:300px;
height:40px;
background:#FFA500;
margin:30px auto;
position:relative;
}
#div2 {
width:40px;
height:40px;
background:#008000;
position:absolute;
left:0;
top:0;
}
</style>
</head>
<body>
<div id="box">
<div id="slider"><img src="img/11.jpg"></div>
<div id="slider2"></div>
</div>
<div id="div1">
<div id="div2"></div>
</div>
<script>
function dragInit(box, id) {
var $box = document.getElementById(box);
var $div = document.getElementById(id);
var style = {
position: "absolute",
top: "0",
left: "0"
}
for (var k in style) {
$div.style[k] = style[k];
}
$div.onmousedown = function(e) { //鼠标按下位置；
e = e || window.event;
var x = e.clientX - $div.offsetLeft;
var y = e.clientY - $div.offsetTop;
document.onmousemove = function(e) { //鼠标按下后移动位置；
e = e || window.event;
var L = e.clientX - x;
var T = e.clientY - y;
//var pW = document.documentElement.clientWidth;//页面宽度；
//var pH = document.documentElement.clientHeight;
var boxW = $box.offsetWidth;
var boxH = $box.offsetHeight;
var divW = $div.offsetWidth; //div的宽；
var divH = $div.offsetHeight;
//范围限制
if (L < 0) {
L = 0;
}
if (T < 0) {
T = 0;
}
//if(L > pW - divW){L = pW - divW;}
//if(T > pH - divH){T = pH - divH;}
if (L > boxW - divW) {
L = boxW - divW;
}
if (T > boxH - divH) {
T = boxH - divH;
}
$div.style.left = L + "px";
$div.style.top = T + "px";
console.log(L, T);
// return {left:L,top:T};
}
document.onmouseup = function(e) {
document.onmousemove = null; //如果不取消，鼠标弹起div依旧会随着鼠标移动
document.onmouseup = null;
}
}
return $div;
};
function getZoom(d1, d2, d3) {
var obj = dragInit('box', 'slider');
console.log(obj);
var oDiv1 = document.getElementById(d1);
var oDiv2 = document.getElementById(d2);
var oDiv3 = document.getElementById(d3);
oDiv2.onmousedown = function(ev) { //鼠标按下位置
var oEvent = ev || event;
var disX = oEvent.clientX - oDiv2.offsetLeft;
document.onmousemove = function(ev) {
var oEvent = ev || event;
var l = oEvent.clientX - disX;
if (l < 0) {
l = 0;
} else if (l > oDiv1.offsetWidth - oDiv2.offsetWidth) {
l = oDiv1.offsetWidth - oDiv2.offsetWidth;
}
oDiv2.style.left = l + 'px'; //l范围：[0,580]
//document.title = l / 580; //范围：[0,1]
var ratio = oDiv1.offsetWidth - oDiv2.offsetWidth;
//比例
var scale = l / ratio;
var w = 600 * scale;
var h = 370 * scale;
console.log(w);
oDiv3.style.cssText = ';width:' + w + 'px;height:' + h + 'px;';
};
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
};
};
};
(function() {
//dragInit('box','slider');
dragInit('box', 'slider2');
getZoom('div1', 'div2', 'slider');
})();
</script>
</body>
</html>
