您的位置：首页 > 其它

DIV宽度自动缓慢变化

2016-07-25 21:30 387 查看

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>宽度缓慢变化</title>
<style>
#chg {
width: 200px;
height: 120px;
background-color: #390;
margin: auto;
}

#btn {
width: 200px;
height: 30px;
background-color: #000;
margin: auto;
display: block;
cursor: pointer;
color: #FFF;
font-size: 12px;
text-align: center;
line-height: 30px;
font-weight: bolder;
}
</style>
</head>
<body>
<div id="chg"></div><br />
<div id="btn" onclick="$d3()">展开</div>
</body>
</html>
<script>
function $d1() {
var l = document.getElementById("chg");
var w = l.offsetWidth;
var maxw = 500;

function chgws() {
w += 1;
if(w >= maxw) {
l.style.width = '500px';
clearInterval(iIntervalId);
} else {
l.style.width = w + 'px';
}
}
iIntervalId = setInterval(chgws, 10);
}

function $d2() {
var m = document.getElementById("chg");
var n = m.offsetWidth;
var maxw = 500;

function chgwh() {
n -= 1;
if(n <= 200) {
m.style.width = '200px';
clearInterval(iIntervalId);
} else {
m.style.width = n + 'px';
}
}
iIntervalId = setInterval(chgwh, 10);
}

function $d3() {
var q = document.getElementById("chg");
var chgb = document.getElementById('btn');
if(chgb.innerHTML == "展开") {
chgb.innerHTML = "收缩";
$d1();
} else {
chgb.innerHTML = "展开";
$d2();
}
}
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航