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

ttx9n · 发表于 2010-7-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)" /> 
 
slide && fadeIn && fadeIn && fadeOut 
 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
运行后，大家看效果。

plvo189 · 发表于 2022-8-18 03:07:06

好人好人好人好人

回复用户1 · 发表于 2022-8-24 23:41:44

感谢楼主分享

q42obh · 发表于 2023-3-20 08:26:25

很不错的源码论坛

lba36h7g · 发表于 2023-5-18 19:26:13

天天源码论坛

qzdhcgs · 发表于 2023-10-8 07:49:45

啪啪啪生怕PSP怕

白狐软件 · 发表于 2023-12-5 19:41:57

老衲笑纳了

qq303604905 · 发表于 2024-9-16 11:12:46

天天源码社区。。。。

qwe520 · 发表于 2024-9-19 09:20:52

额风风风微风微风违法

ki9ku6 · 发表于 2024-9-21 08:39:49

终于找到了，我擦

账号		自动登录	找回密码
密码			立即注册

[JavaScript] js模拟jquery的slide和fadeIn和fadeOut功能

相关帖子