JavaScript实现图片的放大、缩小、平移

<script>
   var ZoomStutas;
   var dragapproved=false;
   var z,x,y,temp1,temp2;
   var count = 10;
   
   function ZoomIn()
   {
    IMG.style.cursor="Images/ZoomIn1.ICO    ZoomStutas="ZoomIn";
   }

   function ZoomOut()
   {
    IMG.style.cursor="Images/ZoomOut1.ico";//改变鼠标指针
    ZoomStutas="ZoomOut";
   }
   
   function Pan()
   {
    IMG.style.cursor="Hand";//改变鼠标指针

    ZoomStutas="Pan"; 
   }
   

//放大、缩小
   function Zoom()
   {
    if(ZoomStutas=="ZoomIn")
    {
        var hX=IMG.height;
        var hY=IMG.width;
       
     IMG.height=hX*1.5;
     IMG.width=hY*1.5;
    } 
    else if(ZoomStutas=="ZoomOut")
    {
     var hX=IMG.height;
        var hY=IMG.width;
       
     IMG.height=hX/1.5;
     IMG.width=hY/1.5;
    }
    else if(ZoomStutas=="Pan")
    {
     
    }
   } 
    

//平移 
   function move()
   {
   if (dragapproved&&ZoomStutas=="Pan")
    {
     IMG.style.pixelLeft=temp1+event.clientX-x;
     IMG.style.pixelTop=temp2+event.clientY-y;
     
     return false;
    }
   }
  
   function drags()
   {
    dragapproved=true;

    x=event.clientX
    y=event.clientY
    temp1=IMG.style.pixelLeft;
    temp2=IMG.style.pixelTop;
    document.οnmοusemοve=move;
   }
   
   document.οnmοusedοwn=drags;
   document.οnmοuseup=new Function("dragapproved=false"); 

   function Picture()
   {
    count = Counting(count);
    Resize(count);
    return false;
   }

   function Counting(count)
   {  
    if (event.wheelDelta >= 120)
    {
     count++;
    }
    else if (event.wheelDelta <= -120)
    {
     count--;  
    }
    
    return count;
   }
   
   function Resize(count)
   {
    IMG.style.zoom = count + '0%';
   }
   
   function KeyDown()
   {
    
    if (event.keyCode!=1||event.KeyCode!=2 ||event.KeyCode!=4)
    {
      event.keyCode=0;
      event.returnValue=false;
     }
   }
  </script>

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值