复制代码 代码如下: //根据ID返回dom元素 var $ = function(id){return document.getElementById(id);} //返回dom元素的当前某css值 var getCss = function(obj,name){ //ie if(obj.currentStyle) { return obj.currentStyle[name]; } //ff else { var style = document.defaultView.getComputedStyle(obj,null); return style[name]; } } Hide函数： 复制代码 代码如下: var hide = function(obj,speed,fn){ obj = $(obj); if (!speed) { obj.style.display = 'none'; return; } else{ speed = speed==='fast'?20:speed==='normal'?30:50; obj.style.overflow = 'hidden'; } //获取dom的宽与高 var oWidth = getCss(obj,'width'), oHeight = getCss(obj,'height'); //每次dom的递减数(等比例) var wcut = 10*(+oWidth.replace('px','') / +oHeight.replace('px','')),hcut = 10; //处理动画函数 var process = function(width,height){ width = +width-wcut>0?+width-wcut:0; height = +height-hcut>0?+width-hcut:0; //判断是否减完了 if(width !== 0 || height !== 0) { obj.style.width = width+'px'; obj.style.height = height+'px'; setTimeout(function(){process(width,height);},speed); } else { //减完后，设置属性为隐藏以及原本dom的宽与高 obj.style.display = 'none'; obj.style.width = oWidth; obj.style.height = oHeight; if(fn)fn.call(obj); } } process(oWidth.replace('px',''),oHeight.replace('px','')); } Show函数与Hide函数类似，只是思路相反而已 复制代码 代码如下: var show = function(obj,speed,fn){ obj = $(obj); if (!speed) { obj.style.display = 'block'; return; } else{ speed = speed==='fast'?20:speed==='normal'?30:50; obj.style.overflow = 'hidden'; } var oWidth = getCss(obj,'width').replace('px',''), oHeight = getCss(obj,'height').replace('px',''); var wadd = 10*(+oWidth / +oHeight),hadd = 10; obj.style.width = 0+'px'; obj.style.height = 0+'px'; obj.style.display = 'block'; var process = function(width,height){ width = +oWidth-width<wadd?+oWidth:wadd+width; height = +oHeight-height<hadd?oHeight:hadd+height; if(width !== +oWidth || height !== +oHeight) { obj.style.width = width+'px'; obj.style.height = height+'px'; setTimeout(function(){process(width,height);},speed); } else { obj.style.width = oWidth+'px'; obj.style.height = oHeight+'px'; if(fn)fn.call(obj); } } process(0,0); } 调用方式如： 复制代码 代码如下: hide('a','normal',function(){ show('a','normal'); }); 呃。。。感觉写得好冗余，但不知要如何再优化，希望有高手能写个精简些的。。。

　　推荐阅读

　　JavaScript判断图片是否能够加载,失败则替换默认图片

一为使网站整洁，二来提升网页体验，不至于让别人觉得你这网站有问题。其实实现起来也是非常简单的，具体请看看代码。 图片加载失败时用默认图片替代 [Ctrl+A 全选 注:如需引入外部Js需刷新才>>>详细阅读

本文标题：用js模拟JQuery的show与hide动画函数代码

地址：http://www.17bianji.com/kaifa2/JS/25664.html

 1/2    1