js 画矩形程序(可以画多个)（按上ctrl或者shift键clear all)
日期：2014-05-16 浏览次数：20498 次
js 画矩形程序(可以画多个)（按下ctrl或者shift键clear all)
<HTML>
<HEAD>
<META http-equiv=imagetoolbar content=no>
<TITLE>
</TITLE>
<STYLE>
.rubberBand {
position: absolute;
visibility: hidden;
width: 0px; height: 0px;
border: 2px solid red;
}
.hidden{
display: none;
}
</STYLE>
</HEAD>
<BODY>
<img name="myImage" id="myImage" src="1.jpg" >
<SCRIPT>
var IMG;
var i = 0;
var startX=0,startY=0,endX=0,endY=0;
var store =[] ;
function startRubber (evt) {
if (!!window.ActiveXObject) {
// IE
var r= document.createElement("div");
r.setAttribute("className","rubberBand")
r.setAttribute("id","rubberBand"+i)
document.body.appendChild(r);
r.style.width = 0;
r.style.height = 0;
r.style.pixelLeft = event.x;
r.style.pixelTop = event.y;
r.style.visibility = 'visible';
IMG.ondragstart = cancelDragDrop; // otherwise IE will try to drag the image
}
else if (document.getElementById) {
// firefox
evt.preventDefault();
var r= document.createElement("div");
r.setAttribute("class","rubberBand")
r.setAttribute("id","rubberBand"+i)
document.body.appendChild(r);
r.style.width = 0;
r.style.height = 0;
r.style.left = evt.clientX + 'px';
r.style.top = evt.clientY + 'px';
r.style.visibility = 'visible';
r.onmouseup = stopRubber;
}
IMG.onmousemove = moveRubber;
}
function moveRubber (evt) {
if (!!window.ActiveXObject) { // IE
var r = eval("document.all.rubberBand"+i);
r.style.width = event.x - r.style.pixelLeft;
r.style.height = event.y - r.style.pixelTop;
}
else if (document.getElementById) { // firefox
var r = document.getElementById('rubberBand'+i);
r.style.width = evt.clientX - parseInt(r.style.left);
r.style.height = evt.clientY - parseInt(r.style.top);
}
return false; // otherwise IE won't fire mouseup :/
}
function stopRubber (evt) {
IMG.onmousemove = null;
statisticCoor();
i=i+1;
}
function statisticCoor(){
if (!!window.ActiveXObject) { // IE
var r = eval("document.all.rubberBand"+i);
store.push({"startX":r.style.pixelLeft,"startY":r.style.pixelTop,"endX":parseInt(r.style.width)+r.style.pixelLeft,"endY":parseInt(r.style.height)+r.style.pixelTop});
}
else if (document.getElementById) { // firefox
var r = document.getElementById('rubberBand'+i);
store.push({"startX":parseInt(r.style.left),"startY":parseInt(r.style.top),"endX":parseInt(r.style.width)+parseInt(r.style.left),"endY":parseInt(r.style.height)+parseInt(r.style.top)});
}
}
function cancelDragDrop()
{
window.event.returnValue = false;
}
IMG = document.getElementById('myImage');
IMG.onmousedown = startRubber;
IMG.onmouseup = stopRubber;
function deleteAllSelected(){
for(var a=0;a<i;a++){
element = getElement('rubberBand'+a);
element.style.display = "None";
}
store = [];
}
function getElement(id){
var element;
if (!!window.ActiveXObject) { // IE
element = eval("document.all."+id);
}
else if (document.getElementById) { // firefox
element = document.getElementById(id);
}
return element;
}
document.onkeydown = function(e){
var e = e || event;
var code = e.keyCode || e.which || e.charCode;
if(code== 16 || code==17){
deleteAllSelected();
}
}
</SCRIPT>
</BODY>
</HTML>
<HTML>
<HEAD>
<META http-equiv=imagetoolbar content=no>
<TITLE>
</TITLE>
<STYLE>
.rubberBand {
position: absolute;
visibility: hidden;
width: 0px; height: 0px;
border: 2px solid red;
}
.hidden{
display: none;
}
</STYLE>
</HEAD>
<BODY>
<img name="myImage" id="myImage" src="1.jpg" >
<SCRIPT>
var IMG;
var i = 0;
var startX=0,startY=0,endX=0,endY=0;
var store =[] ;
function startRubber (evt) {
if (!!window.ActiveXObject) {
// IE
var r= document.createElement("div");
r.setAttribute("className","rubberBand")
r.setAttribute("id","rubberBand"+i)
document.body.appendChild(r);
r.style.width = 0;
r.style.height = 0;
r.style.pixelLeft = event.x;
r.style.pixelTop = event.y;
r.style.visibility = 'visible';
IMG.ondragstart = cancelDragDrop; // otherwise IE will try to drag the image
}
else if (document.getElementById) {
// firefox
evt.preventDefault();
var r= document.createElement("div");
r.setAttribute("class","rubberBand")
r.setAttribute("id","rubberBand"+i)
document.body.appendChild(r);
r.style.width = 0;
r.style.height = 0;
r.style.left = evt.clientX + 'px';
r.style.top = evt.clientY + 'px';
r.style.visibility = 'visible';
r.onmouseup = stopRubber;
}
IMG.onmousemove = moveRubber;
}
function moveRubber (evt) {
if (!!window.ActiveXObject) { // IE
var r = eval("document.all.rubberBand"+i);
r.style.width = event.x - r.style.pixelLeft;
r.style.height = event.y - r.style.pixelTop;
}
else if (document.getElementById) { // firefox
var r = document.getElementById('rubberBand'+i);
r.style.width = evt.clientX - parseInt(r.style.left);
r.style.height = evt.clientY - parseInt(r.style.top);
}
return false; // otherwise IE won't fire mouseup :/
}
function stopRubber (evt) {
IMG.onmousemove = null;
statisticCoor();
i=i+1;
}
function statisticCoor(){
if (!!window.ActiveXObject) { // IE
var r = eval("document.all.rubberBand"+i);
store.push({"startX":r.style.pixelLeft,"startY":r.style.pixelTop,"endX":parseInt(r.style.width)+r.style.pixelLeft,"endY":parseInt(r.style.height)+r.style.pixelTop});
}
else if (document.getElementById) { // firefox
var r = document.getElementById('rubberBand'+i);
store.push({"startX":parseInt(r.style.left),"startY":parseInt(r.style.top),"endX":parseInt(r.style.width)+parseInt(r.style.left),"endY":parseInt(r.style.height)+parseInt(r.style.top)});
}
}
function cancelDragDrop()
{
window.event.returnValue = false;
}
IMG = document.getElementById('myImage');
IMG.onmousedown = startRubber;
IMG.onmouseup = stopRubber;
function deleteAllSelected(){
for(var a=0;a<i;a++){
element = getElement('rubberBand'+a);
element.style.display = "None";
}
store = [];
}
function getElement(id){
var element;
if (!!window.ActiveXObject) { // IE
element = eval("document.all."+id);
}
else if (document.getElementById) { // firefox
element = document.getElementById(id);
}
return element;
}
document.onkeydown = function(e){
var e = e || event;
var code = e.keyCode || e.which || e.charCode;
if(code== 16 || code==17){
deleteAllSelected();
}
}
</SCRIPT>
</BODY>
</HTML>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
