伸缩框效果

最新推荐文章于 2021-06-21 18:42:14 发布

原创最新推荐文章于 2021-06-21 18:42:14 发布 · 1.7k 阅读

·

0

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

#function #flex #border #div #html #button

程序专栏收录该内容

11 篇文章

订阅专栏

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<script type="text/javascript">

var $ = function (id) {

return "string" == typeof id ? document.getElementById(id) : id;

};

var $C = function (id) {

return $(id).style;

};

var Class = {

create: function() {

return function() {

this.initialize.apply(this, arguments);

}

}

}

Object.extend = function(destination, source) {

for (var property in source) {

destination[property] = source[property];

}

return destination;

}

var FlexDiv = Class.create();

FlexDiv.prototype = {

initialize: function(idDiv, options) {

var oDiv = $(idDiv);

oDiv.style.overflow = "hidden";

this.oDiv = oDiv;

this.borderWidth = parseInt(oDiv.style.borderTopWidth) + parseInt(oDiv.style.borderBottomWidth) || 0;

//边框宽度,但取不了外部css设置的值

this.SetOptions(options);

if(this.options.Show){

this.show = 1;//1显示，-1隐藏

this.oDiv.style.height = this.options.maxHeight + "px";

} else {

this.show = -1;

this.oDiv.style.height = "0px";

}

this.timer = null;

},

//设置默认属性

SetOptions: function(options) {

this.options = {//默认值

Show: true,//默认打开状态

iStep: 1,//每次变化的px量

iTime: 10,//每隔多久循环一次

minHeight: 0,//最小高度

maxHeight: this.oDiv.offsetHeight - this.borderWidth//最大高度

};

Object.extend(this.options, options || {});

},

//触发

Flex: function() {

clearTimeout(this.timer); this.show *= -1; this.SetFlex();

},

//执行

SetFlex: function() {

var iHeight = this.oDiv.offsetHeight - this.borderWidth, op = this.options;

if ((this.show > 0 && iHeight < op.maxHeight) || (this.show < 0 && iHeight > op.minHeight)) {

iHeight += this.show * op.iStep;

this.oDiv.style.height = ((iHeight > 0) ? iHeight : 0) + "px";

var oFlex = this;

this.timer = setTimeout(function(){ oFlex.SetFlex(); }, op.iTime);

}

}

};

</script>

</head>

<body>

<script type="text/javascript">

var Flex, Flex1;

window.onload = function(){ Flex = new FlexDiv("divFlex"); Flex1 = new FlexDiv("divFlex1",{Show : false}); }

</script>

<input name="" type="button" value="伸缩效果" onclick="Flex.Flex();Flex1.Flex()" />

<div id="divFlex" style="border:solid 1px;">

<p>内容</p>

<p>内容</p>

<p>内容</p>

<p>内容</p>

<p>内容</p>

<p>内容</p>

<p>内容</p>

</div>

<div id="divFlex1" style="border:solid 1px;">

<p>内容</p>

<p>内容</p>

<p>内容</p>

<p>内容</p>

<p>内容</p>

<p>内容</p>

<p>内容</p>

</div>

</body>

</html>

伸缩框效果

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。