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

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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;

function setPic()...{
    var picObj=document.getElementById("pic1");
    picObj.style.backgroundImage="url("+picInfo[currImg].url+")";
}
function add()...{
    currImg=currImg+1;
    if(currImg>=picInfo.length-1)
        currImg=picInfo.length-1;
    setPic();
}
function dec()...{
    currImg=currImg-1;
    if(currImg<0)
        currImg=0;
    setPic();
}
function down()...{
    var picObj=document.getElementById("pic1");
    downx=parseInt(event.clientX);
    downy=parseInt(event.clientY);
    picObj.style.cursor="hand";
    
}
function up()...{
    var currentX,currentY;
    var picObj=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);
    }
    
    var moveX=currentX+parseInt(event.clientX)-downx;
    var moveY=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 >