<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<div id="d1" class="div1" style="position: relative; width: 100px; height: 25px; background-color: red; float: left; margin-left: 5px; overflow: hidden;">
<div id="d1_d1" class="dd1" style="position: relative; top: 25px; width: 100px; height: 200px; background-color: blue;">
</div>
</div>
<div id="d2" class="div1" style="position: relative; width: 100px; height: 25px; background-color: red; float: left; margin-left: 5px; overflow: hidden;">
<div id="d2_d2" class="dd1" style="position: relative; top: 25px; width: 100px; height: 200px; background-color: blue;">
</div>
</div>
<div id="d3" class="div1" style="position: relative; width: 100px; height: 25px; background-color: red; float: left; margin-left: 5px; overflow: hidden;">
<div id="d3_d3" class="dd1" style="position: relative; top: 25px; width: 100px; height: 200px; background-color: blue;">
</div>
</div>
<script>
var timer1 = null;
var div1 = document.getElementById("d1");
dong(div1, timer1);
var timer2 = null;
var div2 = document.getElementById("d2");
dong(div2, timer2);
var timer3 = null;
var div3 = document.getElementById("d3");
dong(div3, timer3);
function dong(div, timer) {
div.onmouseover = function () {
if (div.offsetHeight < 220) {
clearInterval(timer);
timer = window.setInterval(function () {
div.style.height = (div.offsetHeight + 10) + 'px';
if (div.offsetHeight >= 225) {
clearInterval(timer);
}
}, 20);
}
};
div.onmouseout = function () {
if (div.offsetHeight > 25) {
clearInterval(timer);
timer = window.setInterval(function () {
div.style.height = (div.offsetHeight - 10) + 'px';
if (div.offsetHeight <= 25) {
clearInterval(timer);
}
}, 50);
}
};
}
</script>
</body>
</html>
