图片标记的缩放问题

jzsh2000 2003-02-20 03:17:10

我已经用以下代码完成了图片的标记，但是我现在有两个按钮，可以随意缩放那张图片，现在的问题是我怎样才能在缩放图片的同时将原来已经做好的标记也同样进行移动，即：图片缩放后我原来标记的点的位置相对于图片不发生变化？
谢谢！代码如下：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<html>
<body bgcolor="#FFFFFF" topmargin="0" leftmargin="0">
<script language="JavaScript">
ImgID=0;
function drawboxdown(thelayer){
theoffsetX=document.body.scrollLeft+event.clientX;
theoffsetY=document.body.scrollTop+event.clientY;
MouseAddImg.innerHTML+="<div id=Layer"+ImgID+" style=\"position:absolute; left:"+theoffsetX+"px; top:"+theoffsetY+"px; width:3px; height:3px; z-index:100; border: 1px solid #FF0000; visibility: visible; cursor:crosshair; font-size: 1pt; background-color: #FF0000;\" ></div>";
ImgID++;
}
function zoomin(){
img1.style.width=(img1.clientWidth)*2;
img1.style.height=(img1.clientHeight)*2;
}
function zoomout(){
img1.style.width=(img1.clientWidth)*1/2;
img1.style.height=(img1.clientHeight)*1/2;
}
</script>
<span id=MouseAddImg> </span>
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; overflow: visible; top: 50; left: 50;">
<img border="1" id="img1" src="http://expert.csdn.net/images/csdn.gif" style="cursor:crosshair; width:300; height:200" onclick="drawboxdown('')">
<input type="button" name="cmdAdd1" value="放大1倍" onClick="zoomin()">
<input type="button" name="cmdAdd1" value="缩小1倍" onClick="zoomout()">
</div>
</body>
</html>

...全文

106 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

春哥视角 2003-02-20

打赏
举报

<html>
<body bgcolor="#FFFFFF" topmargin="0" leftmargin="0">
<script language="JavaScript">
ImgID=0;
function drawboxdown(thelayer){
theoffsetX=document.body.scrollLeft+event.clientX;
theoffsetY=document.body.scrollTop+event.clientY;
MouseAddImg.innerHTML+="<div id=Layer"+ImgID+" style=\"position:absolute; left:"+theoffsetX+"px; top:"+theoffsetY+"px; width:3px; height:3px; z-index:100; border: 1px solid #FF0000; visibility: visible; cursor:crosshair; font-size: 1pt; background-color: #FF0000;\" ></div>";
ImgID++;
}
function zoomin(){
img1.style.width=(img1.clientWidth)*2;
img1.style.height=(img1.clientHeight)*2;
for(i=0;i<ImgID;i++){
nowleft=eval("Layer"+i+".style.left");
nowleft=nowleft.substring(0,nowleft.length-2)-50; //50是Layer000的left
eval("Layer"+i+".style.left=50+nowleft*2");
}
for(i=0;i<ImgID;i++){
nowtop=eval("Layer"+i+".style.top");
nowtop=nowtop.substring(0,nowtop.length-2)-50; //50是Layer000的top
eval("Layer"+i+".style.top=50+nowtop*2");
}
}
function zoomout(){
img1.style.width=(img1.clientWidth)*1/2;
img1.style.height=(img1.clientHeight)*1/2;
for(i=0;i<ImgID;i++){
nowleft=eval("Layer"+i+".style.left");
nowleft=nowleft.substring(0,nowleft.length-2)-50;
eval("Layer"+i+".style.left=50+nowleft/2");
}
for(i=0;i<ImgID;i++){
nowtop=eval("Layer"+i+".style.top");
nowtop=nowtop.substring(0,nowtop.length-2)-50;
eval("Layer"+i+".style.top=50+nowtop/2");
}
}
</script>
<span id=MouseAddImg> </span>
<div id="Layer000" style="position:absolute; width:200px; height:115px; z-index:1; overflow: visible; top: 50; left: 50;">
<img border="1" id="img1" src="http://expert.csdn.net/images/csdn.gif" style="cursor:crosshair; width:300; height:200" onclick="drawboxdown('')">
<input type="button" name="cmdAdd1" value="放大1倍" onClick="zoomin()">
<input type="button" name="cmdAdd1" value="缩小1倍" onClick="zoomout()">
</div>
</body></html>

wsj 2003-02-20

打赏
举报

theoffsetX=(document.body.scrollLeft+event.clientX)/img1.offsetWidth;
theoffsetY=(document.body.scrollTop+event.clientY)/img1.offsetHeight;
MouseAddImg.innerHTML+="<div id=Layer"+ImgID+" style=\"position:absolute; left:expression(img1.offsetWidth*"+theoffsetX+"); top:expression(img1.offsetHeight*"+theoffsetY+"); width:3px; height:3px; z-index:100; border: 1px solid #FF0000; visibility: visible; cursor:crosshair; font-size: 1pt; background-color: #FF0000;\" ></div>";