body div js 放大图片_JS简单的图片放大缩小的两种方法

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

方法一：

Html代码

//兼容IE和火狐   缩小放大、缩放

function ImageSuofang(args) {

var oImg = document.getElementById("oImg");

if (args) {

oImgoImg.width = oImg.width * 1.1;

oImgoImg.height = oImg.height * 1.1;

}

else {

oImgoImg.width = oImg.width / 1.1;

oImgoImg.height = oImg.height / 1.1;

}

}

方法二：

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代码

     //引入本地图片