为啥选取框中没有能显示边框？为啥没有出来拉动的效果呢？
w
indow.onload=function(){
var rightDiv=document.getElementById("right");
var upDiv=document.getElementById("up");
var mainDiv=document.getElementById("main");
var ifKeyDown=false;//
var contact=""//表示被按下的触点
//鼠标按下事件应该放到出点上而不是窗口中。
rightDiv.onmousedown=function(){
ifKeyDown=true;
contact="right";
}
upDiv.onmousedown=function(){
ifKeydown=true;
contact="up";
}
//鼠标松开事件
window.onmouseup=function(){
ifKeyDown=false;
}
//鼠标移动事件
window.onmousemove=function(e){
if(ifKeyDown==ture){
if(contact==true){
var x=e.clientX;//鼠标x的坐标
var addWidth=""//鼠标移动后选取框的宽度
var widthBefore=mainDiv.clientWidth-2;//选取变化钱的宽度
addWidth=x-getPosition(mainDiv).left-widthBefore;//
mainDiv.style.width=addWidth+widthBefore+"px";//选取框变化后的宽度
}else if(contact=="up")P
{
var y=e.clientY;
var mainY=getPosition(mainDiv).top;
var addHeight=mainY-y;//增加的高度
var heightBefore=mainDiv.offsetHeight-2;//原来的高度
mainDiv.style.height=heightBefore+adHeight+"px";
mainDiv.style.top=mainDiv.offsetTop-addHEight+""
}
}
}
}
//获取元素相对于屏幕左边的距离，利用offsetLet
function getPosition(node){
var left=node.offsetParent;
var top=node.offsetTop;
var parent=node.offsetParent;
while(parent!=null)
{
left+=parent.offserLeft;
top+=parent.offserTop;
parent=parent.offsetParent;
}
return{"left":left,"top":top};
}
HTML
<!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" />
<script src="Untitled-5.js"></script>
<title>无标题文档</title>
<style>
body{background:#99F}
#box{position:absolute;top:100px;left:200px;width:80px;height:80px}
#img1{position:absolute;opacity:0.5;top:0;left:0}
#img2{position:absolute;top:0;left:0;clip:rect(0,40px,40px,0)}
/*选取框的八个点的信息*/
#main{position:absolute;border:2px solid:#000;width:40px;height:40px}
.minDiv{position:absolute;width:8px;height: 8px;background:#FFF}
.left-up{left:-4px;top:-4px;cursor:nw-resize}
.up{left:50%;margin-left:-4px;top:-4px;cursor:n-resize}
.right-up{right:-4px;top:-4px;cursor:ne-resize}
.right{right:-4px;top:50%;margin-top:-4px;cursor:e-resize}
.right-down{right:-4px;bottom:-4px;cursor:se-resize}
.down{left:50%;margin-left:-4px;bottom:-4px;cursor:s-resize}
.left-down{left:-4px;bottom:-4px;cursor:sw-resize}
.left{top:50%;margin-left:-4px;margin-top:-4px;cursor:w-resize}
</style>
</head>
<body>
<div id="box">
<img src="545863b500014e4602200220-80-80.jpg" id="img1"/>
<img src="545863b500014e4602200220-80-80.jpg" id="img2"/>
<div id="main">
<div class="minDiv left-up"></div>
<div id="up" class="minDiv up"></div>
<div class="minDiv right-up"></div>
<div id="right" class="minDiv right"></div>
<div class="minDiv right-down"></div>
<div class="minDiv down"></div>
<div class="minDiv left-down"></div>
<div class="minDiv left"></div>
</div>
</div>
</body>
</html>
