拖拽，按等比例放大，缩小，任意修改图片大小

　　在页面上实现图片拖拽并可以随意调整图片大小。但如果按住Ctrl键之后，当再调整图片大小的时候需要按照比例进行调整。
　　示例效果点击这里查看

-HTML

<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=gb2312;" />
    <title>拖拽，按等比例放大，缩小，任意修改图片大小</title>
    <meta name="Keywords" content="图片拖拽，图片扥等比缩放" />
    <meta name="Description" content="在页面上实现图片拖拽并可以随意调整图片大小。 但如果按住Ctrl键之后，当再调整图片大小的时候需要按照比例进行调整。" />
  </head>
  <body><style type="text/css">
.chr{cursor:e-resize;}
.cvr{cursor:s-resize;}
.cner{cursor:ne-resize;}
.cnwr{cursor:nw-resize;}
.cdft{cursor:default;}
.cmove{cursor:move;}
</style> 
<img src="/imgblog/20100506/201055151256116.jpg" alt="PS梦幻效果" style="width:300px;position:absolute;left:100;top:100px;" id="img" class="cdft" />
<script type="text/javascript">
var img=document.getElementById('img'),span=10,isDrag=null,isIE=!!document.all,ox,oy,ex,ey,ow,oh,chrPosX=false,chrPosY=false,percent=img.offsetHeight/img.offsetWidth;
function mouseMove(e){
  e=e||event;
  var x=e.offsetX||e.layerX,y=e.offsetY||e.layerY,imgW=img.offsetWidth,imgH=img.offsetHeight;
  if((x<=span&&y<=span)||(x>=imgW-span&&y>=imgH-span))img.className='cnwr';
  else if((x<=span&&y>=imgH-span)||(y<=span&&x>=imgW-span))img.className='cner';
  else if(x<=span||x>=imgW-span)img.className='chr';
  else if(y<=span||y>=imgH-span)img.className='cvr';
  else img.className='cdft';
  
}
function mouseDown(e){
  e=e||event;
  ex=e.clientX;ey=e.clientY;
  ox=parseInt(img.style.left);oy=parseFloat(img.style.top);
  if(img.className=='cdft'){
    isDrag=true;
    img.className='cmove';
  }
  else{
    isDrag=false;
    oh=img.offsetHeight;ow=img.offsetWidth;
    var x=e.offsetX||e.layerX,y=e.offsetY||e.layerY;
    chrPosX=x<=span;
    chrPosY=y<=span;
    if(e.ctrlKey){
       ow=oh/percent;
       img.style.width=ow;
    }
  }
  if(isIE)img.setCapture();  
  document.onmousemove=mouseDownAndMove;
  img.onmousemove=null;
  return false;
}
function mouseDownAndMove(e){
  e=e||event;
  if(isDrag===true){
    img.style.left=ox+e.clientX-ex+'px';
    img.style.top=oy+e.clientY-ey+'px';
  }
  else if(isDrag===false){
    var x=e.clientX-ex,y=e.clientY-ey;
    switch(img.className){
      case 'chr':
        x=chrPosX?-x:x;
        y=e.ctrlKey?percent*x+oh:oh;
        img.style.width=ow+x+'px';
        img.style.height=y+'px';
        if(chrPosX)img.style.left=ox-x+'px';
        break;
      case 'cvr':
        y=chrPosY?-y:y;
        x=e.ctrlKey?y/percent+ow:ow;
        img.style.width=x+'px';
        img.style.height=oh+y+'px';
        if(chrPosY)img.style.top=oy-y+'px';
        break;
      case 'cnwr':
      case 'cner':
        x=chrPosX?-x:x;
        if(e.ctrlKey){//按宽等比
          y=e.ctrlKey?percent*x+oh:oh;
          img.style.width=ow+x+'px';
          img.style.height=y+'px';
          if(chrPosX)img.style.left=ox-x+'px';
        }
        else{          
          y=chrPosY?-y:y;
          img.style.width=ow+x+'px';
          img.style.height=oh+y+'px';
          if(chrPosX)img.style.left=ox-x+'px';
          if(chrPosY)img.style.top=oy-y+'px';
        }
        break;
    }
  }
}
img.onmousemove=mouseMove;
img.onmousedown=mouseDown;
document.onmouseup=function(){
  if(typeof isDrag=="boolean"){
    if(isIE)img.releaseCapture();
  }
  isDrag=null;
  img.className='cdft';
  img.onmousemove=mouseMove;
  document.onmousemove=null;
}
</script> </body>
</html>

加支付宝好友偷能量挖...

原创文章，转载请注明出处：拖拽，按等比例放大，缩小，任意修改图片大小

2010-5-6评论(1)Web开发网

阅读(373)喜欢(0)分类：JavaScript/Ajax开发技巧