JS----图片显示出来后放大缩小

最新推荐文章于 2019-11-06 14:44:03 发布

原创最新推荐文章于 2019-11-06 14:44:03 发布 · 400 阅读

0 ·

CC 4.0 BY-SA版权

DOM 同时被 2 个专栏收录

10 篇文章

订阅专栏

7 篇文章

订阅专栏

本文介绍了一个简单的网页应用，该应用使用JavaScript实现图片的基本显示和动态调整大小的功能。通过按钮点击事件，可以加载预设的图片并进行放大或缩小操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function()
{
/*var divpostion = document.getElementById("bu1");
divpostion.style.position="absolute";
divpostion.style.top=700;
divpostion.style.left=700;*/

}
function show()
{
var divdo = document.getElementById("a");
divdo.innerHTML="<img src='xx.jpg' id='im'>"
var dis =document.getElementById("im");
dis.height=300;
dis.width=300;
}
function big()
{
var di =document.getElementById("im");

di.height= di.height+100;
di.width=di.height+100;
}
function ss()
{
var di =document.getElementById("im");
di.height= di.height-100;
di.width=di.height-100;
}
</script>
</head>
<body>
<div id="a">xxxx</div>
<form>
<input type="button"onclick="show()">
<input type="button" value="放大"onclick="big();" id="bu1" style="position: absolute;top: 600px;left: 500px" >
<input type="button" value="缩小"onclick="ss();" id="bu2"style="position: absolute;top: 600px;left: 700px" >
<input>
</form>
</body>
</html>