<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img {
margin: 100px 0px 0px 500px;
}
#div2 {
margin-left: 500px;
}
#max,
#min {
display: inline-block;
border: 1px solid aqua;
font-size: 30px;
border-radius: 50%;
background-color: #FFFF00;
outline: none
}
</style>
</head>
<body>
<div id="div1">
<!--<img src="img/001.jpg" id="myImage" />-->
<img src="http://img0.imgtn.bdimg.com/it/u=1244475385,1750660751&fm=21&gp=0.jpg" id="myImage"/>
</div>
<div id="div2">
<input type="button" id="max" value="放大" />
<input type="button" id="min" value="縮小" />
</div>
</body>
<script type="text/javascript">
//setInterval(fun,time) 每隔一段時間執行一次規定的函數
//一直循環下去，時間以毫秒為單位
//例如：
//var timer=setInterval(function(){alert(1)},1000);
//clearInterval(timer): 清除時間函數，終止時間函數繼續執行。
//例如：clearInterval(timer)
// 步驟：
//１.添加頁面元素，實現頁面布局
//2.在頁面布局的基礎上，通過使用javascript來控制操作按鈕，
//從而實現頁面的交互效果
//３.
window.onload = function() {
var maxBth = document.getElementById("max");
maxBth.onclick = function() { //添加放大點擊事件
//放大函數
maxFun();
}
var img = document.getElementById("myImage");
var maxWidth = img.width * 2; //放大的極限值
var maxHeight = img.height * 2; //放大的高度的極限值
//定義放大函數
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 {
alert("已經放大到最大值了")
clearInterval(maxTimer);
}
} else {
clearInterval(maxTimer);
}
}, 20);
}
var minBtn = document.getElementById("min");
minBtn.onclick = function() {
minFun();
}
var minWidth = img.width * 0.5; //縮小寬度的極限值
var minHeight = img.height * 0.5; //縮小高度的極限值
//實現縮小函數
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 {
alert("已經縮小到最小值了")
clearInterval(maxTimer);
}
} else {
clearInterval(maxTimer);
}
}, 20);
}
}
</script>
</html>