用定时器实现逐渐放大层的功能

最新推荐文章于 2025-08-15 09:01:53 发布

weixin_33725270

最新推荐文章于 2025-08-15 09:01:53 发布

阅读量129

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/wangyhua/archive/2012/02/27/4050678.html

本文介绍了一种使用JavaScript动态调整HTML元素尺寸的方法。通过设置定时器逐步改变div元素的宽度和高度，演示了如何实现元素的渐进放大效果。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<script type="text/javascript">
var showintervalId;
function showDiv() {
showintervalId = setInterval("show()", 100);
}
function show() {
var div1 = document.getElementById("div1");
var olderWidth = div1.style.width;
var olderHeight = div1.style.height;

olderWidth = parseInt(olderWidth, 10);
olderHeight = parseInt(olderHeight, 10);

if (olderWidth >= 200) {
clearInterval(showintervalId);
}
olderWidth = olderWidth + 10;
olderWidth = olderWidth + "px";

olderHeight = olderHeight + 10;
olderHeight = olderHeight + "px";
alert(olderWidth);
div1.style.width = olderWidth;
div1.style.height = olderHeight;
}
</script>

</head>
<body>
<div id="div1" style="border-color: Red; border-style: solid; border-width: 1px;
width: 100px; height: 100px">
中国人爱情自觉的中国人我现在发现电影天堂网站，是有两个网址吗，一个是迅雷下载，一个是快车下载，我怎么一下就是快车呢，怎么才能有迅雷的呢？中国人爱情自觉的中国人
我现在发现电影天堂站，是有两个网址吗，一个是迅雷下载，一</div>
<input type="button" id="" value="放大" onclick="document.getElementById('div1').style.width='200px';document.getElementById('div1').style.height='200px'" />
<input type="button" id="" value="逐渐放大" onclick="showDiv()" />
</body>
</html>

转载于:https://www.cnblogs.com/wangyhua/archive/2012/02/27/4050678.html