首頁 > 開發者 > JavaScript
以左上方為定點，放大縮小，該點位置不變。
方法一：
Html代碼
複製代碼 代碼如下:
<script type="text/javascript">
//相容IE和Firefox 縮小放大、縮放
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 id="form1">
<div class="pancontainer" data-orient="center" style="width:320px; height:480px;margin: 5px 300px 0px 400px;border: 1px solid #000;">
<img id="oImg" src="/img/c.jpg" alt="pic"/>
</div>
<input id="btn1" type="button" value="放大" onclick="ImageSuofang(true)" />
<input id="btn2" type="button" value="縮小" onclick="ImageSuofang(false)" />
<!-- <input type="button" value="<-Rotate逆時針" name="RotateL" id="RotateL" onclick="rotateRight('oImg',90);"> -->
</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 onload="initial()">
<div id="biankuang" data-orient="center">
<img name="myImage" src="/img/c.jpg" alt="pic"/> //引入本地圖片
</div>
<p>
<input type="button" value="放大圖片" onclick="zoomIn()">
<input type="button" value="縮小圖片" onclick="zoomOut()">
<input type="button" value="重設圖片" onclick="resetImage()">
<span id="zoomsize"></span> <span id="imgsize"></span></p>
</body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
