DIV的变高与变宽

最新推荐文章于 2023-10-23 12:05:36 发布

bangxionger9224

最新推荐文章于 2023-10-23 12:05:36 发布

阅读量117

点赞数

原文链接：http://www.cnblogs.com/theWayToAce/p/5265853.html

版权

代码：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
 <title>无标题文档</title>
 <style>
div {
width: 200px;
height: 200px;
margin: 20px;
float: left;
background: yellow;
 }
 </style>
 <script>
 window.onload = function () {
var oDiv1 = document.getElementById("div1");
oDiv1.onmouseover = function () {
startMove(this, 400);
 }

oDiv1.onmouseout = function () {
startMove(this, 200);
 };

function startMove(obj, iTarger) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var speed = (iTarger - obj.offsetHeight) / 6;//此处切记结果不要写反
 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (obj.offsetHeight == iTarger) {
clearInterval(obj.timer);//此处需注意！
 } else {
obj.style.height = obj.offsetHeight + speed + "px";
 }
 }, 30);
 }


var oDiv2 = document.getElementById("div2");
oDiv2.onmouseover = function () {
startMove_1(this, 400);
 }

oDiv2.onmouseout = function () {
startMove_1(this, 200);
 };

function startMove_1(obj, iTarger) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var speed = (iTarger - obj.offsetWidth) / 4;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (obj.offsetWidth == iTarger) {
clearInterval(obj.timer);
 } else {
obj.style.width = obj.offsetWidth + speed + "px";
 }
 }, 30);
 }

 }
 </script>
</head>

<body>
<div id="div1">变高</div>
<div id="div2">变宽</div>
</body>
</html>