为什么代码运行没有反应？
为什么代码运行没有反应？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="zz/text.js"></script>
<style>
body{background:#333;}
#box{position:absolute;top:100px;left:200px;width:460px;height:360px;}
#img1{opacity:0.7;position:absolute;top:0;left:0;}
#img2{position:absolute;top:0;left:0;clip:rect(0,200px,200px,0)}
#main{position:absolute;border:1px solid #fff;width:200px;height:200px;}
.minDiv{position:absolute;width:6px;height:6px;background:#fff;}
.left-up{top:-3px;left:-3px;cursor:nw-resize;}
.up{left:50%;margin-top:-3px;cursor:n-resize;}
.right-up{right:-3px;top:-3px;cursor:ne-resize;}
.right{right:-3px;top:50%;margin-top: -3px;cursor:e-resize;}
.right-down{right:-3px;bottom:-3px;cursor:se-resize;}
.down{bottom:-3px;left:50%;margin-left: -3px;cursor:s-resize;}
.left-down{left:-3px;bottom:-3px;cursor:sw-resize;}
.left{left:-3px;top:50%;margin-top: -3px;cursor:w-resize;}
</style>
</head>
<body>
<div id="box">
<img src="F:\java\a1.jpg" id="img1"/>
<img src="F:\java\a1.jpg" id="img2"/>
<div id="main">
<div id="left-up" class="minDiv left-up"></div>
<div id="up" class="minDiv up"></div>
<div id="right-up" class="minDiv right-up"></div>
<div id="right" class="minDiv right"></div>
<div id="tright-down" class="minDiv right-down"></div>
<div id="down" class="minDiv down"></div>
<div id="left-down" class="minDiv left-down"></div>
<div id="left" class="minDiv left"></div>
</div>
</div>
</body>
</html>/*
* @Author: anchen
* @Date: 2016-06-17 17:12:59
* @Last Modified by: anchen
* @Last Modified time: 2016-06-19 22:40:14
*/
window.onload=function()
{
var rightDiv=document.getElementById("right");
var upDiv=document.getElementById("up");
var mainDiv=document.getElementById("main");
var leftDiv=document.getElementById("left");
var downDiv=document.getElementById("down");
var left-upDiv=document.getElementById("left-up");
var right-upDiv=document.getElementById("right-up");
var ifKeyDown=false;//鼠标当前状态没有被按下
var contact=""//表示按下的触点
//鼠标按下事件
rightDiv.onmousedown=function()
{
ifKeyDown=true;
contact="right";
}
upDiv.onmousedown=function()
{
ifKeyDown=true;
contact="up";
}
leftDiv.onmousedown=function()
{
ifKeyDown=true;
contact="left";
}
downDiv.onmousedown=function()
{
ifKeyDown=true;
contact="down";
}
//鼠标松开事件
window.onmouseup=function()
{
ifKeyDown=false;
}
//鼠标移动事件
window.onmousemove=function(e)
{
if(ifKeyDown==true)
{
if(contact=="right")
{
var x = e.clientX;//鼠标x坐标
var addWidth = "";//鼠标移动后选取框增加的宽度
var widthBefore = mainDiv.offsetWidth-2;//选取框变化之前的宽度
addWidth = x - getPosition(mainDiv).left - widthBefore;
mainDiv.style.width=addWidth+widthBefore+"px";//选取框变化后
}
else if(contact=="up")
{
var y=e.clientY;//鼠标纵坐标
var mainY=getPosition(mainDiv).top;//选取框相对于屏幕上边的距离
var addHeight=mainY-y;//增加的高度
var heightBefore=mainDiv.offsetHeight-2;//原来的高度
mainDiv.style.height=heightBefore+addHeight+"px";
mainDiv.style.top=mainDiv.offsetTop-addHeight+"px";
}
else if(contact=="left")
{
var x=e.clientX;
var mainX=getPosition(mainDiv).left;
var addWidth=mainX-x;
var widthBefore=mainDiv.offsetWidth-2;
mainDiv.style.width=widthBefore+addWidth+"px";
mainDiv.style.left=mainDiv.offsetLeft-addWidth+"px";
}
else if(contact=="down")
{
var y=e.clientY;
var heightBefore=mainDiv.offsetHeight-2;
var mainY=mainDiv.offsetTop;
var addHeight=y-heightBefore-mainY;
mainDiv.style.height=addHeight+heightBefore+"px";
}
}
}
}
//获取元素相当于屏幕左边的距离，利用offsetleft
function getPosition(node)
{
var left = node.offsetLeft;
var top = node.offsetTop;
var parent = node.offsetParent;
while(parent !=null)
{
left+=parent.offsetLeft;
top+=parent.offsetTop;
parent.parent.offsetParent;
}
return {"left":left,"top":top};
}
