Javascript实现图片的移动，图片的放大，图片缩小功能

< html >
< head >
< style > ...
.drag {...}{
    CURSOR: move; POSITION: relative;
     border-right: black 1px dashed; border-top: black 1px dashed; border-left: black 1px dashed; border-bottom: black 

1px dashed;
    
}
</ style >
</ head >
< body >
< form >
< script  type ="text/javascript" > ...
var dragapproved=false;
var ismove=true;
var z,x,y;
var imgx,imgy;
var imgw,imgh;
var issave=0;
var ismanager=false;
var moresize=0;
var copyl,copyt;
var oldw,oldh;
function move()
...{
    if (event.button==1&&dragapproved)
    ...{
        Scoling();
        if(ismove)
        ...{
            copyl=z.offsetLeft;
            copyt=getElementPos(z.id).y;
            maint=getElementPos(z.parentElement.id).y;
            mainh=z.parentElement.clientHeight;
            if(document.body.clientWidth>915)
            ...{
                moresize=(document.body.clientWidth-915)/2;
            }
            else
            ...{
                moresize=0;
            }
            var aa=copyl-moresize;
            var noww=z.style.pixelLeft;
            var nowh=z.style.pixelTop;
            oldw=noww;
            z.style.pixelLeft=temp1+event.clientX-x;
            z.style.pixelTop=temp2+event.clientY-y;
            
        }
        else
        ...{
            if(z.width>20&&z.height>20)
            ...{
                if(z.width<500&&z.height<450)
                ...{
                    if(event.shiftKey )
                    ...{
                        
                        if(x-event.clientX>0)
                        ...{
                            z.width=imgw-(x-event.clientX);
                            z.height=imgh*z.width/imgw;
                        }
                        else
                        ...{
                           z.width=imgw+(event.clientX-x); 
                           z.height=imgh*z.width/imgw;
                        }
                    }
                    else
                    ...{
                        if(x-event.clientX>0)
                        ...{
                            z.width=imgw-(x-event.clientX);
                        }
                        else
                        ...{
                           z.width=imgw+(event.clientX-x); 
                        }
                        if(y-event.clientY>0)
                        ...{
                            z.height=imgh-(y-event.clientY);
                        }
                        else
                        ...{
                            z.height=imgh+(event.clientY-y);
                        }
                    }
                 }
                 else
                 ...{
                    z.width=470;
                    z.height=400;
                 }
            }
            else
            ...{
                z.width=25;
                z.height=25;
            }
        }        
        return false;
    }
}

function Scoling()
...{
    if((x<=imgx&&x>imgx-10)&&(imgy<=imgh&&imgy>imgh-10))
    ...{
        z.style.cursor="nw-resize";
        ismove=false;
    }
    else
    ...{
        z.style.cursor="move";
        ismove=true;
    }
}
var i=0;
document.body.onmousemove=function imgmousemove()
...{
    if (event.srcElement.className=="drag") 
    ...{
        var mimgw,mimgh,mx,xy;
        z=event.srcElement;
        mimgw=z.width;
        mimgh=z.height;
        mx=event.offsetX;
        my=event.offsetY;
        if(mx>imgw-10&&my>mimgh-10)
        ...{
            z.style.cursor="nw-resize";
            ismove=false;
        }
        else
        ...{
            z.style.cursor="move";
            ismove=true;
        }    
}
}
function drags()
...{
    if (event.srcElement.className=="drag") 
    ...{
        dragapproved=true;
        z=event.srcElement;
        imgx=getElementPos(event.srcElement.id).x+z.width;
        imgy=event.offsetY;
        imgw=z.width;
        imgh=z.height;
        temp1=z.style.pixelLeft;
        temp2=z.style.pixelTop;
        x=event.clientX;
        y=event.clientY;
        
        event.srcElement.onmousemove=move;
    }
}
///移动坐标
function stop()
...{
if(z)
...{
z.style.cursor="move";
}
ismove=true;
    dragapproved=false;
}

    function getElementPos(elementId) ...{

    var ua = navigator.userAgent.toLowerCase();
    var isOpera = (ua.indexOf('opera') != -1);
    var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof

    var el = document.getElementById(elementId);
    if(el==null)
    ...{
        return false;
    }
    if(el.parentNode === null || el.style.display == 'none') 
    ...{
        return false;
    }

    var parent = null;
    var pos = [];
    var box;

    if(el.getBoundingClientRect)    //IE
    ...{
        box = el.getBoundingClientRect();
        var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
        var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);

        return ...{x:box.left + scrollLeft, y:box.top + scrollTop};
    }
    else if(document.getBoxObjectFor)    // gecko
    ...{
        box = document.getBoxObjectFor(el);
           
        var borderLeft = (el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0;
        var borderTop = (el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0;

        pos = [box.x - borderLeft, box.y - borderTop];
    }
    else    // safari & opera
    ...{
        pos = [el.offsetLeft, el.offsetTop];
        parent = el.offsetParent;
        if (parent != el) ...{
            while (parent) ...{
                pos[0] += parent.offsetLeft;
                pos[1] += parent.offsetTop;
                parent = parent.offsetParent;
            }
        }
        if (ua.indexOf('opera') != -1 
            || ( ua.indexOf('safari') != -1 && el.style.position == 'absolute' )) 
        ...{
                pos[0] -= document.body.offsetLeft;
                pos[1] -= document.body.offsetTop;
        } 
    }
        
    if (el.parentNode) ...{ parent = el.parentNode; }
    else ...{ parent = null; }
  
    while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML') 
    ...{ // account for any scrolled ancestors
        pos[0] -= parent.scrollLeft;
        pos[1] -= parent.scrollTop;
  
        if (parent.parentNode) ...{ parent = parent.parentNode; } 
        else ...{ parent = null; }
    }
    return ...{x:pos[0], y:pos[1]};
}
</ script >
< div  id ="positiveDiv" >
< img  alt =""  class ="drag"  id ="positiveDragImg"  runat ="server"  src ="127157.gif"  onmousedown ="drags();"  onmouseup ="stop();"    />
</ div >
</ form >
</ body >
</ html >