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

来源:互联网 发布:广电网络还没整合 编辑:程序博客网 时间:2024/04/27 19:02

<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.onmousemove=move;
   }
   
   document.onmousedown=drags;
   document.onmouseup=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>

 

原创粉丝点击