您的位置：首页 > Web前端 > JavaScript

蛋疼地开始学JS原型，prototype，试着写一个小小的伸缩框

2011-04-09 01:40 411 查看

自己也刚开始学，之前貌似我写的JS都是一大堆的函数，一大堆的ID啥的，虽然东西都写得出来，但是自己也感觉很烦。

嘛……于是，感觉应该要开始学着写写原型了……借着脑袋里淡淡地印象……写这么一个小东西。算是准备开始学吧……

<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>小东西</title>
</head>
<body>
<style type="text/css">
.aa{ position:relative; overflow:hidden;}
.bb{ position:absolute; bottom:0;}
</style>
<script type="text/javascript">
function smooth_show(id){
var a = this;
this.move = 0;
this.self = document.getElementById(id);
this.changer = this.self.parentNode;
this.open = function(){
window.clearInterval(a.timer);
a.timer = window.setInterval(function(){
if (a.changer.offsetHeight < a.self.offsetHeight){
var dis = a.self.offsetHeight - a.changer.offsetHeight;
var change_height = dis / 3;
change_height = change_height < 2 ? 2 : change_height;
change_height = change_height + a.changer.offsetHeight > a.self.offsetHeight ? dis : change_height;
a.changer.style.height = a.changer.offsetHeight + change_height + "px";
}else {
window.clearInterval(a.timer);
}
}, 20);
a.move = 1;
};
this.close = function(){
window.clearInterval(a.timer);
a.timer = window.setInterval(function(){
if (a.changer.offsetHeight > 0){
var dis = a.changer.offsetHeight;
var change_height = dis / 3;
change_height = change_height < 2 ? 2 : change_height;
change_height = a.changer.offsetHeight - change_height < 0 ? dis : change_height;
a.changer.style.height = a.changer.offsetHeight - change_height + "px";
}else {
window.clearInterval(a.timer);
}
}, 20);
a.move = 2;
}
}
smooth_show.prototype.auto = function(){
if (this.move != 1){
this.open();
}else {
this.close();
}
}
</script>
<div class="aa">
<div class="bb" id="test">
<div>asdfasdfasdf</div>
<div>asdfasdfasdf</div>
<div>asdfasdfasdf</div>
<div>asdfasdfasdf</div>
<div>asdfasdfasdf</div>
<div>asdfasdfasdf</div>
<div>asdfasdfasdf</div>
<div>asdfasdfasdf</div>
<div>asdfasdfasdf</div>
</div>
</div>
<script type="text/javascript">
var asdf = new smooth_show("test");
asdf.open();
</script>
<div style="position:absolute; left:200px; top:150px;">
<input type="button" value="展开" onclick="asdf.open();" />
<input type="button" value="关闭" onclick="asdf.close();" />
<input type="button" value="自动" onclick="asdf.auto();" />
</div>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航