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

更新时间：2010年07月22日 00:30:08 作者：

以前用过jquery的slideUp，slideDown，等许多很不错的方法，感觉很容易就能实现页面元素的动画效果！

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

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

运行后，大家看效果。

您可能感兴趣的文章:

webpack结合express实现自动刷新的方法
这篇文章主要给大家介绍了关于webpack结合express实现自动刷新的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用webpack具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-05-05
教你使用javascript简单写一个页面模板引擎
不知道你有木有听说过一个基于Javascript的Web页面预处理器，叫做AbsurdJS。只是打算写一个CSS的预处理器，后来扩展到了CSS和HTML，可以用来把Javascript代码转成CSS和HTML代码。当然，由于可以生成HTML代码，你也可以把它当成一个模板引擎，用于在标记语言中填充数据。
2015-05-05
webpack5 常用插件使用问题小结
webpack 是一个模块打包器,这篇文章主要介绍了webpack5 常用插件使用问题小结,每次打包完都需要手动删除掉dist文件目录,使用CleanWebpackPlugin就可自动清除dist目录,感兴趣的朋友跟随小编一起看看吧
2024-02-02
JS常用跨域方法实现原理解析
这篇文章主要介绍了JS常用跨域方法实现原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-12-12
JavaScript学习笔记之取值函数getter与取值函数setter详解
这篇文章主要介绍了JavaScript取值函数getter与取值函数setter，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
分享别人写的一个小型js框架
分享别人写的一个小型js框架...
2007-08-08
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
这篇文章主要介绍了ES6新特性之类(Class)和继承(Extends)相关概念与用法,结合实例形式较为详细的分析了ES6中类(Class)和继承(Extends)的基本概念、语法、使用方法与注意事项,需要的朋友可以参考下
2017-05-05
javascript+canvas制作九宫格小程序
这篇文章主要介绍了javascript+canvas制作九宫格小程序，效果非常棒，这里推荐给有需要的小伙伴们
2014-12-12
分享JavaScript获取网页关闭与取消关闭的事件
这篇文章主要介绍了JavaScript获取网页关闭与取消关闭的事件，有需要的朋友可以参考一下
2013-12-12
javascript时间与时间戳互转多种方式
javascript获取时间、时间戳等,最核心的就是利用Date关键词去获取,时间戳的获取方式整理了5种方法,后4种是利用new Date()实例化对象来获取当前时间,再对当前获取的时间再进一步处理获取时间戳,本文给大家介绍的非常详细,需要的朋友参考下吧
2023-11-11

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具