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

更新時間：2010年07月22日 00:30:08 作者：

以前用過jquery的slideUp，slideDown，等許多很不錯的方法，感覺很容易就能實現(xiàn)頁面元素的動畫效果！

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

<!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="7qqrrsc"   id="main1" style="height:200px; "> slide && fadeIn && fadeIn && fadeOut </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

運行后，大家看效果。

您可能感興趣的文章:

webpack結(jié)合express實現(xiàn)自動刷新的方法
這篇文章主要給大家介紹了關于webpack結(jié)合express實現(xiàn)自動刷新的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用webpack具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2019-05-05
教你使用javascript簡單寫一個頁面模板引擎
不知道你有木有聽說過一個基于Javascript的Web頁面預處理器，叫做AbsurdJS。只是打算寫一個CSS的預處理器，后來擴展到了CSS和HTML，可以用來把Javascript代碼轉(zhuǎn)成CSS和HTML代碼。當然，由于可以生成HTML代碼，你也可以把它當成一個模板引擎，用于在標記語言中填充數(shù)據(jù)。
2015-05-05
webpack5 常用插件使用問題小結(jié)
webpack 是一個模塊打包器,這篇文章主要介紹了webpack5 常用插件使用問題小結(jié),每次打包完都需要手動刪除掉dist文件目錄,使用CleanWebpackPlugin就可自動清除dist目錄,感興趣的朋友跟隨小編一起看看吧
2024-02-02
JS常用跨域方法實現(xiàn)原理解析
這篇文章主要介紹了JS常用跨域方法實現(xiàn)原理解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-12-12
JavaScript學習筆記之取值函數(shù)getter與取值函數(shù)setter詳解
這篇文章主要介紹了JavaScript取值函數(shù)getter與取值函數(shù)setter，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-08-08
分享別人寫的一個小型js框架
分享別人寫的一個小型js框架...
2007-08-08
ES6新特性之類(Class)和繼承(Extends)相關概念與用法分析
這篇文章主要介紹了ES6新特性之類(Class)和繼承(Extends)相關概念與用法,結(jié)合實例形式較為詳細的分析了ES6中類(Class)和繼承(Extends)的基本概念、語法、使用方法與注意事項,需要的朋友可以參考下
2017-05-05
javascript+canvas制作九宮格小程序
這篇文章主要介紹了javascript+canvas制作九宮格小程序，效果非常棒，這里推薦給有需要的小伙伴們
2014-12-12
分享JavaScript獲取網(wǎng)頁關閉與取消關閉的事件
這篇文章主要介紹了JavaScript獲取網(wǎng)頁關閉與取消關閉的事件，有需要的朋友可以參考一下
2013-12-12
javascript時間與時間戳互轉(zhuǎn)多種方式
javascript獲取時間、時間戳等,最核心的就是利用Date關鍵詞去獲取,時間戳的獲取方式整理了5種方法,后4種是利用new Date()實例化對象來獲取當前時間,再對當前獲取的時間再進一步處理獲取時間戳,本文給大家介紹的非常詳細,需要的朋友參考下吧
2023-11-11