用js模擬JQuery的show與hide動(dòng)畫(huà)函數(shù)代碼
更新時(shí)間：2010年09月20日 00:44:13 作者：
用javascript實(shí)現(xiàn)的模擬jquery下的顯示與隱藏的動(dòng)畫(huà)效果，學(xué)習(xí)的朋友可以參考下。
復(fù)制代碼 代碼如下:
//根據(jù)ID返回dom元素
var $ = function(id){return document.getElementById(id);}
//返回dom元素的當(dāng)前某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函數(shù)：
復(fù)制代碼 代碼如下:
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的遞減數(shù)(等比例)
var wcut = 10*(+oWidth.replace('px','') / +oHeight.replace('px','')),hcut = 10;
//處理動(dòng)畫(huà)函數(shù)
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 {
//減完后，設(shè)置屬性為隱藏以及原本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函數(shù)與Hide函數(shù)類似，只是思路相反而已
復(fù)制代碼 代碼如下:
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);
}
調(diào)用方式如：
復(fù)制代碼 代碼如下:
hide('a','normal',function(){
show('a','normal');
});
呃。。。感覺(jué)寫得好冗余，但不知要如何再優(yōu)化，希望有高手能寫個(gè)精簡(jiǎn)些的。。。
您可能感興趣的文章:
- js彈性勢(shì)能動(dòng)畫(huà)之拋物線運(yùn)動(dòng)實(shí)例詳解
- 原生javascript實(shí)現(xiàn)勻速運(yùn)動(dòng)動(dòng)畫(huà)效果
- js運(yùn)動(dòng)動(dòng)畫(huà)的八個(gè)知識(shí)點(diǎn)
- JS運(yùn)動(dòng)框架之分享側(cè)邊欄動(dòng)畫(huà)實(shí)例
- javascript動(dòng)畫(huà)之圓形運(yùn)動(dòng),環(huán)繞鼠標(biāo)運(yùn)動(dòng)作小球
- 用js實(shí)現(xiàn)的模擬jquery的animate自定義動(dòng)畫(huà)(2.5K)
- js 排序動(dòng)畫(huà)模擬 冒泡排序
- javascript動(dòng)畫(huà)之模擬拖拽效果篇
- JS實(shí)現(xiàn)基于Sketch.js模擬成群游動(dòng)的蝌蚪運(yùn)動(dòng)動(dòng)畫(huà)效果【附demo源碼下載】
相關(guān)文章
這篇文章主要幫助大家理解javascript對(duì)象繼承，先從一個(gè)問(wèn)題出發(fā)，引入javascript對(duì)象繼承相關(guān)知識(shí)，感興趣的小伙伴們可以參考一下2016-04-04
這篇文章主要為大家詳細(xì)介紹了javascript利用鍵盤控制小方塊的移動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-04-04
跟我學(xué)習(xí)javascript的循環(huán)
跟我學(xué)習(xí)javascript的循環(huán)，本文不僅針對(duì)javascript循環(huán)進(jìn)行講解，還對(duì)prototype補(bǔ)充了幾點(diǎn)小tips，歡迎大家閱讀。2015-11-11
JS題解leetcode去掉最低工資和最高工資后的工資平均值
這篇文章主要為大家介紹了JS題解leetcode去掉最低工資和最高工資后的工資平均值，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
uniapp自定義應(yīng)用退出執(zhí)行內(nèi)容實(shí)例代碼
近幾日使用uni-app開(kāi)發(fā)移動(dòng)應(yīng)用APP遇到了個(gè)不常見(jiàn)的需求,下面這篇文章主要給大家介紹了關(guān)于uniapp自定義應(yīng)用退出執(zhí)行內(nèi)容的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
本篇文章主要是對(duì)js獲取和設(shè)置屬性的方法進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02
本插件原修改自 Chroder.com 的 WordPress Code Highlight 插件。但 CoolCode 插件在它基礎(chǔ)上修改了很多的內(nèi)容。2007-07-07
js 點(diǎn)擊a標(biāo)簽 獲取a的自定義屬性方法
下面小編就為大家?guī)?lái)一篇js 點(diǎn)擊a標(biāo)簽 獲取a的自定義屬性方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
這篇文章主要介紹了JavaScript中的值類型轉(zhuǎn)換介紹,本文講解了值類型轉(zhuǎn)換規(guī)則、值類型轉(zhuǎn)換與比較、顯式類型轉(zhuǎn)換、對(duì)類型自動(dòng)轉(zhuǎn)換的使用等內(nèi)容,需要的朋友可以參考下2014-12-12
JavaScript 操作字符串的幾種常見(jiàn)方法，需要的朋友可以參考下。2009-11-11