<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div style="text-align: center">
<img src="a063-405x243.jpg" id="myImage">
<br/>
<input type="button" name="" value="放大" id="max">
<input type="button" name="" value="缩小" id="min">
</div>
<script type="text/javascript">
window.onload = function() {
var maxBtn = document.getElementById("max");
var minBtn = document.getElementById("min");
var img = document.getElementById("myImage");
var maxWidth = img.width * 2; //极限值设置
var maxHeight = img.height * 2;
var minWidth = img.width * 0.5;
var minHeight = img.height * 0.5;
maxBtn.onclick = function() {
maxFun(); // 添加放大事件
};
minBtn.onclick = function() {
minFun(); //添加缩小事件
};
function maxFun() {
var endWidth = img.width * 1.3; //每次点击后的宽度
var endHeight = img.height * 1.3;
var maxTimer = setInterval(function() {
if (img.width < endWidth) {
if (img.width < maxWidth) {
img.width = img.width * 1.05;
img.height = img.height * 1.05;
} else {
clearInterval(maxTimer);
alert("已经放大到最大了");
}
} else {
clearInterval(maxTimer);
}
}, 20);
}
function minFun() {
var endWidth = img.width * 0.7; //每次点击后的宽度
var endHeight = img.height * 0.7;
var maxTimer = setInterval(function() {
if (img.width > endWidth) {
if (img.width > minWidth) {
img.width = img.width * 0.95;
img.height = img.height * 0.95;
} else {
clearInterval(maxTimer);
alert("已经放大到最小了");
}
} else {
clearInterval(maxTimer);
}
}, 20);
}
};
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div style="text-align: center">
<img src="a063-405x243.jpg" id="myImage">
<br/>
<input type="button" name="" value="放大" id="max">
<input type="button" name="" value="缩小" id="min">
</div>
<script type="text/javascript">
window.onload = function() {
var maxBtn = document.getElementById("max");
var minBtn = document.getElementById("min");
var img = document.getElementById("myImage");
var maxWidth = img.width * 2; //极限值设置
var maxHeight = img.height * 2;
var minWidth = img.width * 0.5;
var minHeight = img.height * 0.5;
maxBtn.onclick = function() {
maxFun(); // 添加放大事件
};
minBtn.onclick = function() {
minFun(); //添加缩小事件
};
function maxFun() {
var endWidth = img.width * 1.3; //每次点击后的宽度
var endHeight = img.height * 1.3;
var maxTimer = setInterval(function() {
if (img.width < endWidth) {
if (img.width < maxWidth) {
img.width = img.width * 1.05;
img.height = img.height * 1.05;
} else {
clearInterval(maxTimer);
alert("已经放大到最大了");
}
} else {
clearInterval(maxTimer);
}
}, 20);
}
function minFun() {
var endWidth = img.width * 0.7; //每次点击后的宽度
var endHeight = img.height * 0.7;
var maxTimer = setInterval(function() {
if (img.width > endWidth) {
if (img.width > minWidth) {
img.width = img.width * 0.95;
img.height = img.height * 0.95;
} else {
clearInterval(maxTimer);
alert("已经放大到最小了");
}
} else {
clearInterval(maxTimer);
}
}, 20);
}
};
</script>
</body>
</html>