JS画矩形
转自：http://lily64.blogbus.com/logs/4089198.html
<html>
<head>
<title>网页特效|JcwCn.Com/Js|---显示鼠标坐标</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<SCRIPT LANGUAGE="JavaScript">
start=true;
startx=0;
starty=0;
function mychange(e)
{
if(!e)e=event;
mydiv=document.getElementById("myrect");
if(e.clientX-startx<0)
{
myleft=e.clientX;
mywidth=startx-e.clientX;
}
else
{
myleft=startx;
mywidth=e.clientX-startx;
}
if(e.clientY-starty<0)
{
mytop=e.clientY;
myheight=starty-e.clientY;
}
else
{
mytop=starty;
myheight=e.clientY-starty;
}
mydiv.style.left=myleft;
mydiv.style.top=mytop;
mydiv.style.width=mywidth;
if(!(document.all&&(myheight==0)))
mydiv.style.height=myheight;
}
function myclick(e)
{
if(!e)e=event;
if(start)
{
document.getElementById("mydraw").innerHTML="";
mydiv=document.createElement("div");
mydiv.style.position="absolute";
mydiv.style.overflow="hidden";
mydiv.style.height=1;
mydiv.style.border="2px solid red";
mydiv.id="myrect";
document.getElementById("mydraw").appendChild(mydiv);
startx=e.clientX;
starty=e.clientY;
}
else
mychange(e);
start=!start;
}
function mymove(e)
{
if(start)return;
if(document.getElementById("myrect")==null)return;
mychange(e);
}
document.onclick=myclick;
document.onmousemove=mymove;
</SCRIPT>
</head>
<body onMouseDown="mynew()">
<div id=mydraw></div>
</body>
</html>
<html>
<head>
<title>网页特效|JcwCn.Com/Js|---显示鼠标坐标</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<SCRIPT LANGUAGE="JavaScript">
start=true;
startx=0;
starty=0;
function mychange(e)
{
if(!e)e=event;
mydiv=document.getElementById("myrect");
if(e.clientX-startx<0)
{
myleft=e.clientX;
mywidth=startx-e.clientX;
}
else
{
myleft=startx;
mywidth=e.clientX-startx;
}
if(e.clientY-starty<0)
{
mytop=e.clientY;
myheight=starty-e.clientY;
}
else
{
mytop=starty;
myheight=e.clientY-starty;
}
mydiv.style.left=myleft;
mydiv.style.top=mytop;
mydiv.style.width=mywidth;
if(!(document.all&&(myheight==0)))
mydiv.style.height=myheight;
}
function myclick(e)
{
if(!e)e=event;
if(start)
{
document.getElementById("mydraw").innerHTML="";
mydiv=document.createElement("div");
mydiv.style.position="absolute";
mydiv.style.overflow="hidden";
mydiv.style.height=1;
mydiv.style.border="2px solid red";
mydiv.id="myrect";
document.getElementById("mydraw").appendChild(mydiv);
startx=e.clientX;
starty=e.clientY;
}
else
mychange(e);
start=!start;
}
function mymove(e)
{
if(start)return;
if(document.getElementById("myrect")==null)return;
mychange(e);
}
document.onclick=myclick;
document.onmousemove=mymove;
</SCRIPT>
</head>
<body onMouseDown="mynew()">
<div id=mydraw></div>
</body>
</html>