自己也刚开始学,之前貌似我写的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="展开" οnclick="asdf.open();" /> <input type="button" value="关闭" οnclick="asdf.close();" /> <input type="button" value="自动" οnclick="asdf.auto();" /> </div> </body> </html>