JS簡單的圖片放大縮小的兩種方法_javascript技巧

以左上角為定點，放大縮小，該點位置不變。

方法一：

Html程式碼

複製程式碼

複製程式碼

程式碼如下

  

    

            
        >>



方法二：

CSS編碼如下：
Css代碼




複製程式碼

程式碼如下:#biankuang{height:480px;width:320px;margin: 30px autoorder;}//加上一個bidth:320px;margin: 30px autoorder;}//加一bx;定點為左上角。

下面是實現圖片縮小放大功能的JS代碼：

Js代碼

複製代碼

程式碼如下:var zoomLevel = 0; var currentWidth = 0;

var currentHeight = 0;

var originalinalbinal>Heidthiginal function initial(){
    currentWidth = document.myImage.width;
    currentHeight = document.myImage.height; originalHeight = currentHeight;
update();
}
function zoomIn(){
    document.myImage.width = currentWidth*1.2;
  1;
    update();
}
function zoomOut(){
    document.myImage.width = currentWidth/1.2;
 .I5m.  zoomLevel = zoomLevel - 1;
    update();
}
function resetImage(){
    document.myImage.width = originalWidth; >    zoomLevel = 0;
    update();
}
function update(){
    currentWidth = document.myImage.width； size.innerText = zoomLevel;
    imgsize.innerText = currentWidth "X" currentHeight;
}


 html的body中的程式碼如下：

Html程式碼

複製程式碼

複製程式碼

複製程式碼


程式碼如下

     //引入本地圖片