以左上角为定点，放大缩小，该点位置不变。
方法一：
Html代码
复制代码 代码如下:
<script type="text/javascript">
//兼容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;
}
}
</script>
<form>
<div data-orient="center">
<img src="https://www.jb51.net/img/c.jpg" alt="pic"/>
</div>
<input type="button" value="放大" />
<input type="button" value="缩小" />
<!-- <input type="button" value="<-Rotate逆时针"> -->
</form>
方法二：
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代码
复制代码 代码如下:
<body>
<div data-orient="center">
<img src="https://www.jb51.net/img/c.jpg" alt="pic"/> //引入本地图片
</div>
<p>
<input type="button" value="放大图片">
<input type="button" value="缩小图片">
<input type="button" value="重置图片">
<span></span> <span></span></p>
</body>
您可能感兴趣的文章: