資源描述：
《實(shí)現(xiàn)Javascript透明特效功能》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。
1、實(shí)現(xiàn)Javascript透明特效代碼可控式Javascript透明特效也就是透明度可以自行設(shè)置，但是這種方法在IE7下極有可能失效，不過這些東西對(duì)大家了解Javascript透明特效還是有所幫助的。Javascript透明特效是script.aculo.us提到的特效中最簡單的特效之一。既然是特效，必須涉及時(shí)間與空間的概念。時(shí)間我們可以用setTimeout與setInterval，個(gè)人比較喜歡setTimeout，雖然它每次調(diào)用都重復(fù)注冊(cè)，但可控性比較好?？臻g就全憑CSS的絕對(duì)定位實(shí)現(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.}但是這樣并不完美，因?yàn)镮E的濾鏡可能會(huì)在IE7中失效，我們必須要用zoom=1來激活hasLayout。我們?cè)偬砑右恍┛芍贫▍?shù)擴(kuò)充它。注釋已經(jīng)非常詳細(xì)，不明白在留言里再問我吧。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ù)時(shí)間07.??duration=options.duration
8、
9、1.0,08.??//開始時(shí)透明度09.??from=options.from
10、
11、0.0,10.??//結(jié)束時(shí)透明度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í)行的間隔時(shí)間，單位毫秒20.??varfrequency=100,21.??//設(shè)算重復(fù)調(diào)用的次數(shù)22.??count=duration*1000/frequency,23.??//設(shè)算每次透明度的遞增量24.??detal=Math.abs(to-from)?/count,25.??//正在進(jìn)行的次數(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
