怎么用javascript HTML 实现图片的拖拽和放大缩小？

看看这篇http://www.walterzorn.com/dragdrop/dragdrop_e.htm#download

解决方案 »

  1.   

    这个可以实现拖拽可是不能放大缩小................................
    <body onselectstart="return false">
    <div id="abc"><FONT face="宋体"></FONT></div>
    <script language="javascript">
    var uiBox=function()
    {
    this.width=0;
    this.height=0;
    this.backGround="";
    this.startPositionX=0;
    this.startPositionY=0;
    this.text="&nbsp;";
    this.setProperty=function(bgPic,width,height,x,y)
    {
    this.backGround=bgPic;
    this.width=width;
    this.height=height;
    this.startPositionX=x;
    this.startPositionY=y;
    }
    }
    var dragBox=function()
    {
    this.Super=uiBox;
    this.Super();
    this.element=document.createElement("div");
    this.isDrag=false;
    this.startX=0;
    this.startY=0;
    this.positionX=0;
    this.positionY=0;
    this.element.mousePF=0;
    this.setPosition=function(left,top)
    {
    this.positionX=left;
    this.positionY=top;
    }
    this.appendToElement=function(parentObj)
    {

    this.element.style.width=this.width+"px";
    this.element.style.height=this.height+"px";
    this.element.style.backgroundImage="url("+this.backGround+")";
    this.element.style.backgroundPositionX=this.startPositionX;
    this.element.style.backgroundPositionY=this.startPositionY;
    this.element.style.backgroundRepeat="no-repeat";
    this.element.style.position="absolute";
    this.element.style.left=this.positionX+"px";
    this.element.style.top=this.positionY+"px";
    this.element.style.cursor="default";
    parentObj.appendChild(this.element);
    }
    this.element.onmousedown=function()
    {
    this.isDrag=true;
    this.startX=event.x;
    this.startY=event.y;
    this.positionX=parseInt(this.style.left);
    this.positionY=parseInt(this.style.top);
    }
    this.element.onmouseup=function()
    {
    this.isDrag=false;
    this.positionX=parseInt(this.style.left);
    this.positionY=parseInt(this.style.top);
    } this.element.onmouseout=function()
    {


    }

    this.element.onmouseover=function()
    {

    }

    var tmpBodyAction=document.body.onmousemove;
    document.body.onmousemove=attacheMouseMoveFunction(tmpBodyAction,this)
    var tmpBodyAction=document.body.onmouseup;
    document.body.onmouseup=attacheMouseUpFunction(tmpBodyAction,this)}function attacheMouseMoveFunction(oFunction,obj)
    {
    return function()
    {
    try
    {
    oFunction();
    }catch(e){}

    if (obj.element.isDrag==true)
    {

    var dx=true;
    var dy=true;
    if (obj.element.positionX+event.x-obj.element.startX<0) dx=false;
    if (obj.element.positionY+event.y-obj.element.startY<0) dy=false;
    if (dx)
    {
    obj.element.style.left=(obj.element.positionX+event.x-obj.element.startX)+"px";
    }
    if (dy)
    {
    obj.element.style.top=(obj.element.positionY+event.y-obj.element.startY)+"px";
    }
    }
    }
    }function attacheMouseUpFunction(oFunction,obj)
    {
    return function()
    {
    try
    {
    oFunction();
    }catch(e){}
    obj.element.isDrag=false;
    }
    } onload=function()
    {
    var dObj=new dragBox();
    dObj.setProperty("http://bbs.51js.com/images/default/logo.gif",200,100,-50,0);
    dObj.setPosition(100,0);
    dObj.appendToElement(document.getElementById("abc"));


    var dObj2=new dragBox();
    dObj2.setProperty("http://bbs.51js.com/images/default/logo.gif",200,100,-50,0);
    dObj2.setPosition(200,400);
    dObj2.appendToElement(document.getElementById("abc"));
    } </script>

    <div id="debug"></div>
    </body>
      

  2.   


    这个可以实现等比例缩放。你结合一下看看效果<script language="JavaScript" type="text/javascript"> <!-- // 说明：用 JavaScript 实现网页图片等比例缩放 
    // 整理：http://www.CodeBit.cn  function DrawImage(ImgD,FitWidth,FitHeight){     var image=new Image();     image.src=ImgD.src;     if(image.width>0 && image.height>0){         if(image.width/image.height>= FitWidth/FitHeight){             if(image.width>FitWidth){                 ImgD.width=FitWidth;                 ImgD.height=(image.height*FitWidth)/image.width;             }else{                 ImgD.width=image.width;                 ImgD.height=image.height;             }         } else{             if(image.height>FitHeight){                 ImgD.height=FitHeight;                 ImgD.width=(image.width*FitHeight)/image.height;             }else{                 ImgD.width=image.width;                 ImgD.height=image.height;             }         }     } } //--> </script> 
    <img src="C:\Documents and Settings\Administrator\桌面\我的文件\11.gif" alt="自动缩放后的效果" width="200" height="100" 
     onload="javascript:DrawImage(this,200,200);" />