js模擬jquery的slide和fadeIn和fadeOut功能

2019-11-21 00:20:33

字體：大中小

來源：轉載

供稿：網友

就想了想 jquery是怎么實現的呢，無奈，哥能力差，還不到研究jquery源碼的時候。那好吧，自己做個很簡陋的版本，呵呵！好像還行，等哥的能力上去了再來優化下

<!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> <style> #main1{ margin:20px auto; width:200px; background-color:#6c9; overflow:hidden; } </style> <script type="text/javascript"> var Animate = { obj : null, itime : 0, flag : 1, maxHeight : 0, _$ : function(id){ return "string" == typeof(id) ? document.getElementById(id) : id; }, slideDown : function(){ if(parseInt(this.obj.style.height) > this.maxHeight){ this.flag = 0; return }; this.obj.style.height = parseInt(this.obj.style.height) + 1 + 'px'; setTimeout("Animate.slideDown()",this.itime); }, slideUp: function(){ if(parseInt(this.obj.style.height) < 1){ this.flag = 1; return }; this.obj.style.height = parseInt(this.obj.style.height) - 1 + 'px'; var repeat = "Animate.slideUp()"; setTimeout(repeat,this.itime); }, slide : function(objid,itime){ this.obj = this._$(objid); this.itime = itime; if(this.flag){ this.maxHeight = this.maxHeight ? this.maxHeight :parseInt(this.obj.style.height); this.obj.style.display = "block"; this.obj.style.height = "0px"; this.slideDown(); } else { this.slideUp(); } }, fadeIn : function(objid,itime){ this.obj = this._$(objid); this.itime = itime; var that = this; this.maxHeight =parseInt( this.obj.style.height); var i = 100; var timer = setInterval(function(){ that.obj.style.cssText ="filter :alpha(opacity=" + i + ");-moz-opacity:"+i*0.01+";opacity: "+i*0.01+";height:"+that.maxHeight+"px;"; i--; if(i == 0) clearInterval(timer); },that.itime); }, fadeOut : function(objid,itime){ this.obj = this._$(objid); this.itime = itime; var that = this; this.maxHeight =parseInt( this.obj.style.height); var i = 0; var timer = setInterval(function(){ that.obj.style.cssText ="filter :alpha(opacity=" + i + ");-moz-opacity:"+i*0.01+";opacity: "+i*0.01+";height:"+that.maxHeight+"px;"; i++; if(i ==100) clearInterval(timer); },that.itime); } } </script> </head> <body> <input type="button" value="slide" onclick="Animate.slide('main1',10)" /> <input type="button" value="fadeIn" onclick="Animate.fadeIn('main1',10)" /> <input type="button" value="fadeOut" onclick="Animate.fadeOut('main1',10)" /> <div   class="iwvjtn8m0"   id="main1" style="height:200px; "> slide && fadeIn && fadeIn && fadeOut </div> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

運行后，大家看效果。

上一篇：JavaScript 事件系統

下一篇：(function($){...})(jQuery)的意思