我的代码为何无法实现旁边随着左边图片的框移动而显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<style type="text/css">
body{background: navajowhite;margin: 0px;padding: 0px;}
#img1{width: 500px;height: 300px;position: absolute;opacity: 0.2;top: 1px;left: 1px;}
#img2{width: 500px;height: 300px;position: absolute;/*clip: rect(0px,101px,101px,0px);top: 1px;left: 1px;*/}
#preview{position: absolute;top:100px;left:680px;width:500px;height:300px;}
#preview #img3{position: absolute;top:0;left:0;width: 500px;height: 300px;} /*clip的使用必须要被使用者是绝对定位*/
#main{width: 100px;height: 100px;border: 1px solid black;
position: absolute;}
.bagekuang{
width: 8px;height: 8px;background: red;position: absolute;
}
#left-up{
top: -4px;left: -4px;cursor: nw-resize;
}
#left-certen{
top: 50%;margin-top: -4px; left: -4px;cursor: w-resize;
}
#left-down{
bottom: -4px;left: -4px;cursor: ne-resize;
}
#certen-up{
left: 50%;top: -4px;cursor: n-resize;margin-left: -4px;
}
#certen-down{
left: 50%;bottom: -4px;cursor: s-resize;margin-left: -4px;
}
#right-up{
right: -4px;top: -4px;cursor: ne-resize;
}
#right-certen{
top: 50%;right: -4px;margin-top: -4px;cursor: e-resize;
}
#right-down{
bottom: -4px;right: -4px;cursor: se-resize;
}
</style>
<script type="text/javascript">
window.onload=function(){
/* window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();*/
document.onselectstart = new Function('event.returnValue=false;');//禁止图片被选中
$( "#main" ).draggable({ containment: 'parent' ,drag: setChoice});
var rightcertendiv=document.getElementById("right-certen");
var certenupdiv=document.getElementById("certen-up");
var leftcertendiv=document.getElementById("left-certen");
var certendowndiv=document.getElementById("certen-down");
var rightupdiv=document.getElementById("right-up");
var rightdowndiv=document.getElementById("right-down");
var leftdowndiv=document.getElementById("left-down");
var leftupdiv=document.getElementById("left-up");
var contact = "";//表示被按下的触点
var maindiv=document.getElementById("main");
var shubiao=false;//鼠标起初默认状态
var kbianhuan="";//表示被按下的是哪一个触点
//鼠标按下事件
rightcertendiv.onmousedown=function(e){ //将onmousedown前的window换成要绑定的框的div
e.stopPropagation();
shubiao =true;
kbianhuan="right-certen"
contact = "right";
}
certenupdiv.onmousedown=function(e){
e.stopPropagation();
shubiao =true;
kbianhuan="certen-up";
contact = "up";
}
leftcertendiv.onmousedown=function(e){
e.stopPropagation();
shubiao =true;
kbianhuan="left-certen";
contact = "left";
}
certendowndiv.onmousedown=function(e){
shubiao =true;
kbianhuan="certen-down";
contact = "down";
e.stopPropagation();
}
rightupdiv.onmousedown=function(e){
e.stopPropagation();
shubiao =true;
kbianhuan="right-up";
contact = "right-up";
}
rightdowndiv.onmousedown=function(e){
e.stopPropagation();
shubiao =true;
kbianhuan="right-down";
contact = "right-down";
}
leftdowndiv.onmousedown=function(e){
e.stopPropagation();
shubiao =true;
kbianhuan="left-down";
contact = "left-down";
}
leftupdiv.onmousedown=function(e){
e.stopPropagation();
shubiao =true;
kbianhuan="left-up";
contact = "left-up";
}
//鼠标松开事件
window.onmouseup=function(){
shubiao = false;
}
//鼠标移动事件
window.onmousemove=function(e){
if(shubiao==true){
switch(contact){
case "right":rightcerten(e);break;
case "up": certenup(e);break;
case "left":leftcerten(e);break;
case "down":certendown(e);break;
case "left-up":leftcerten(e);certenup(e);break;
case "right-up":rightcerten(e);certenup(e);break;
case "left-down":leftcerten(e);certendown(e);break;
case "right-down":rightcerten(e);certendown(e);break;
}
}
setChoice();
setPreview();
}
//右边移动函数
function rightcerten(e){
var x=e.clientX;//鼠标横坐标
var addwidth="";//鼠标移动后增加的距离
var widthbefore=maindiv.offsetWidth - 2;//选取框变化前的宽度
addwidth=x - juli(maindiv).left - widthbefore;//增加的宽度
maindiv.style.width=widthbefore+addwidth+"px";
}
//上边移动函数
function certenup(e){
var y=e.clientY;//鼠标纵坐标
var addheight=juli(maindiv).top-y;//增加的高度，正值边长，负值比原来边短
var heightbefore=maindiv.offsetHeight-2;//原来的高度
maindiv.style.height=heightbefore+addheight+"px";//现在的长度
maindiv.style.top=maindiv.offsetTop-addheight+"px"//现在的高度，通过改变纵坐标的值来实现上边框的移动
}
//左边移动函数
function leftcerten(e){
var x=e.clientX;//鼠标横坐标
var addwidth="";//鼠标移动后增加的距离
var widthbefore=maindiv.offsetWidth - 2;//选取框变化前的宽度
addwidth=juli(maindiv).left-x;//增加的宽度，正值边长，负值比原来边短
maindiv.style.width=widthbefore+addwidth+"px";//现在的宽度
maindiv.style.left=maindiv.offsetLeft-addwidth+"px";//现在里左边父级的距离，通过改变横坐标的值来实现左边框的宽度的增加
}
//下边移动函数
function certendown(e){
var y=e.clientY;//鼠标纵坐标
var heightbefore=maindiv.offsetHeight - 2;//选取框变化前的高度
var addheight=y-juli(maindiv).top-heightbefore//增加的长度,正值为边长，负值为变短
maindiv.style.height=heightbefore+addheight+"px";//现在选框的长度
}
//i元素离上一个父级的距离
function juli(i){
var left=i.offsetLeft;
var top=i.offsetTop;
var parent=i.offsetParent;
while(parent != null){
left=left+parent.offsetLeft;
top=top+parent.offsetTop;
parent=parent.offsetParent;
}
return{"left":left,"top":top}
}
//选框区域亮度
function setChoice(){
var top=maindiv.offsetTop;
var right=maindiv.offsetLeft+maindiv.offsetWidth;
var bottom=maindiv.offsetTop+maindiv.offsetHeight;
var left=maindiv.offsetLeft;
var img2=document.getElementById("img2");
img2.style.clip="rect("+top+"px,"+right+"px,"+bottom+"px,"+left+"px)";
/*tu2.style.clip = "rect("+top+"px,"+right+"px,"+bottom+"px,"+left+"px)";*/
}
//预览函数
function setPreview(){
var top = mainDiv.offsetTop;
var right = mainDiv.offsetLeft+mainDiv.offsetWidth;
var bottom = mainDiv.offsetTop+mainDiv.offsetHeight;
var left = mainDiv.offsetLeft;
var tu3 = document.getElementById("img3");
img3.style.top = -top+"px";
img3.style.left = -left+"px";
img3.style.clip = "rect("+top+"px,"+right+"px,"+bottom+"px,"+left+"px)";
}
}
</script>
</head>
<body>
<div id="tupian"style="width: 500px;height: 300px;">
<img id="img1" src="img/1.jpg"/>
<img id="img2" src="img/1.jpg"/>
<div id="main">
<div id="left-up"class="bagekuang"></div>
<div id="right-certen"class="bagekuang"></div>
<div id="left-down"class="bagekuang"></div>
<div id="certen-up"class="bagekuang"></div>
<div id="right-up"class="bagekuang"></div>
<div id="left-certen"class="bagekuang"></div>
<div id="certen-down"class="bagekuang"></div>
<div id="right-down"class="bagekuang"></div>
</div>
</div>
<div id="preview">
<img id="img3" src="img/1.jpg"/>
</div>
</body>
</html>
