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需再刷新一下页面才能执行]

运行后，大家看效果。

您可能感兴趣的文章:

浅谈js中的引用和复制(传值和传址)
下面小编就为大家带来一篇浅谈js中的引用和复制(传值和传址)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-09-09
A标签触发onclick事件而不跳转的多种解决方法
一个标签仅仅是要触发onclick行为，遇到了A标签触发onclick事件时不执行跳转，下面与大家分享下四种解决方法，感兴趣的朋友可以参考下哈
2013-06-06
js 获取当前web应用的上下文路径实现方法
下面小编就为大家带来一篇js 获取当前web应用的上下文路径实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-08-08
JS比较2个日期间隔的示例代码
这篇文章主要介绍了JS比较2个日期间隔的方法,需要的朋友可以参考下
2014-04-04
IE本地存储userdata的一个bug说明
再一次项目上用到ie的userdata，考虑当用户不使用flash插件用于存储一些聊天记录
2010-07-07
JS实现的表格行鼠标点击高亮效果代码
这篇文章主要介绍了JS实现的表格行鼠标点击高亮效果代码,涉及JavaScript响应鼠标事件动态变换页面元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-11-11
filemanage功能中用到的common.js
filemanage功能中用到的common.js...
2007-04-04
浅析JavaScript预编译和暗示全局变量
这篇文章主要介绍了JavaScript预编译和暗示全局变量的相关资料，帮助大家更好的理解和学习JavaScript，感兴趣的朋友可以了解下
2020-09-09
javascript动态添加删除tabs标签的方法
这篇文章主要介绍了javascript动态添加删除tabs标签的方法,实例分析了javascript针对tabs标签的动态添加与删除方法,涉及javascript页面元素的操作技巧,需要的朋友可以参考下
2015-07-07
超简单的微信小程序轮播图
这篇文章主要为大家详细介绍了超简单的微信小程序轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-11-11