用js实现图的缩放和拖动显示,

<! DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//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=gb2312" />
< title > 无标题文档 </ title >
< link href ="main.css" rel ="stylesheet" type ="text/css" />

</ head >

< body >

< table width ="600" border ="0" >
< tr >
< td width ="500" height ="500" >< div id ="pic1" onmousedown ="down()" onmouseup ="up()" ></ div ></ td >
< td >< a href ="javascript:add()" > + </ a >< br />
< a href ="javascript:dec()" > - </ a ></ td >

</ tr >
</ table >

< script language ="JavaScript" type ="text/javascript" > ...
picInfo=[
...{x:722,y:513,url:"img/001.jpg"},
...{x:1445,y:1027,url:"img/002.jpg"},
...{x:2889,y:2053,url:"img/003.jpg"}
];
downx=0;
downy=0;
currImg=0;

functionsetPic()...{
varpicObj=document.getElementById("pic1");
picObj.style.backgroundImage="url("+picInfo[currImg].url+")";
}
functionadd()...{
currImg=currImg+1;
if(currImg>=picInfo.length-1)
currImg=picInfo.length-1;
setPic();
}
functiondec()...{
currImg=currImg-1;
if(currImg<0)
currImg=0;
setPic();
}
functiondown()...{
varpicObj=document.getElementById("pic1");
downx=parseInt(event.clientX);
downy=parseInt(event.clientY);
picObj.style.cursor="hand";

}
functionup()...{
varcurrentX,currentY;
varpicObj=document.getElementById("pic1");
setPic();
//alert("x="+(downx-parseInt(event.clientX))+";y="+(downy-parseInt(event.clientY)));
if(picObj.style.backgroundPositionX=="")
currentX=0;
else...{
currentX=parseInt(picObj.style.backgroundPositionX);
}
if(picObj.style.backgroundPositionY=="")
currentY=0;
else...{
currentY=parseInt(picObj.style.backgroundPositionY);
}

varmoveX=currentX+parseInt(event.clientX)-downx;
varmoveY=currentY+parseInt(event.clientY)-downy;

if(moveX>0)...{
moveX=0;
}else
...{
if(500-moveX>picInfo[currImg].x)
moveX=-(picInfo[currImg].x-500);
}

if(moveY>0)...{
moveY=0;
}else
...{
if(500-moveY>picInfo[currImg].y)
moveY=-(picInfo[currImg].y-500);
}

picObj.style.backgroundPositionY=moveY+"px";
picObj.style.backgroundPositionX=moveX+"px";
picObj.style.cursor="auto";

}
setPic();
</ script >
</ body >


</ html >