資源描述：
《實現(xiàn)Javascript透明特效功能》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。
1、實現(xiàn)Javascript透明特效代碼可控式Javascript透明特效也就是透明度可以自行設(shè)置，但是這種方法在IE7下極有可能失效，不過這些東西對大家了解Javascript透明特效還是有所幫助的。Javascript透明特效是script.aculo.us提到的特效中最簡單的特效之一。既然是特效，必須涉及時間與空間的概念。時間我們可以用setTimeout與setInterval，個人比較喜歡setTimeout，雖然它每次調(diào)用都重復(fù)注冊，但可控性比較好?？臻g就全憑CSS的絕對定位實現(xiàn)位移了。在開始之前，我們練習(xí)一下setTimeout的遞歸用法（用來模擬setInterval）
2、。01.functiontext(el){02.??varnode?=(typeofel=="string")?document.getElementById(el):el;03.??vari=0;04.??varrepeat=function(){05.????setTimeout(function(){06.??????node.innerHTML="
"+i+"
";07.??????i++;08.??????if(i<=100){09.????????setTimeout(arguments.callee,100);10.??????}11.????},100
3、)12.??}13.??repeat();14.}我們來試一下最簡單的淡入特效，就是把node.innerHTML那一行改成透明度的設(shè)置。01.functionfadeIn(el){02.??varnode?=(typeofel=="string")?document.getElementById(el):el;03.??vari=0;04.??varfade=function(){05.????setTimeout(function(){?????06.????????!+"v1"?(node.style.filter="alpha(opacity="+i+")"):(node
4、.style.opacity=i/100);07.??????i++;08.??????if(i<=100){09.????????setTimeout(arguments.callee,100);10.??????}11.????},100)12.??}13.??fade();14.}但是這樣并不完美，因為IE的濾鏡可能會在IE7中失效，我們必須要用zoom=1來激活hasLayout。我們再添加一些可制定參數(shù)擴充它。注釋已經(jīng)非常詳細，不明白在留言里再問我吧。01.functionopacity(el){02.??//必選參數(shù)03.??varnode?=(typeofel=="s
5、tring")?document.getElementById(el):el,04.??//可選參數(shù)05.??options=arguments[1]
6、
7、{},06.??//變化的持續(xù)時間07.??duration=options.duration
8、
9、1.0,08.??//開始時透明度09.??from=options.from
10、
11、0.0,10.??//結(jié)束時透明度11.??to=options.to
12、
13、0.5,12.??operation=1,13.??init=0;14.??if(to-from<0){15.????operation=-1,16.????init=1;17.?
14、?}18.??//內(nèi)部參數(shù)19.??//setTimeout執(zhí)行的間隔時間，單位毫秒20.??varfrequency=100,21.??//設(shè)算重復(fù)調(diào)用的次數(shù)22.??count=duration*1000/frequency,23.??//設(shè)算每次透明度的遞增量24.??detal=Math.abs(to-from)?/count,25.??//正在進行的次數(shù)26.??i=0;27.??varmain=function(){28.????setTimeout(function(){29.??????if(!+"v1"){30.????????if(node.currentSt
15、yle.hasLayout)?node.style.zoom=1;//防止濾鏡失效31.????????node.style.filter="alpha(opacity="+(init*100+operation*detal*i*100).toFixed(1)+")"32.??????}else{33.????????node.style.opacity=?(init+operation*detal*i).toFixed(3)34.??????}35.??????no
