JS简单的图片放大缩小的两种方法_javascript技巧

以左上角为定点，放大缩小，该点位置不变。

方法一：

Html代码

复制代码 代码如下:

  

    

            
       
        

            

方法二：

CSS编码如下：

Css代码

复制代码 代码如下:

#biankuang{height:480px;width:320px;margin: 30px auto;}//加一个border可以看到定点为左上角。

下面是实现图片缩小放大功能的JS代码：

Js代码

复制代码 代码如下:

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

 html的body中的代码如下：

Html代码

复制代码 代码如下:

     //引入本地图片