图片点击放大缩小

最新推荐文章于 2021-06-05 04:52:06 发布

xiaheader

最新推荐文章于 2021-06-05 04:52:06 发布

阅读量609

点赞数

分类专栏：网页制作文章标签： web前端开发

本文链接：https://blog.csdn.net/xiaheader/article/details/45269339

版权

网页制作专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<!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>

xiaheader

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片点击放大缩小

test window.onload = function() { var maxBtn = document.getElementById("max"); var minBtn = document.getElement
复制链接

扫一扫

专栏目录