fadeOpacity()
レイヤ−の背景色の不透明度を指定するsetOpacity()の応用です。引数のフェイドスイッチが -1 なら不透明から透明へ
1 なら透明から不透明へフェイドします。終了時不透明度を指定すればその不透明度で停止します。不透明度は0〜1で0は透明、1は不透明をあらわします。
n4とMac版e4.5,e5は動作しません。setOpacity()内の該当部分は不要なら削ってください。
(これらのopacityはCSS2までには指定されていない暫定実装なので将来のCSS仕様によっては変更される場合もあり得ることに注意してください。)
*このファンクションをコピーして<script>と</script>の間にペーストしておくだけでこの機能をクロスブラウザに利用できるようになります。
Cross-Browser のための Sample Function
Syntax : fadeOpacity('レイヤ−名',フェイドスイッチ,終了時不透明度)
//--フェイド関数
function fadeOpacity(layName,swt,stopOpacity){
//--カウンター初期化
if(!window.fadeOpacity[layName])
fadeOpacity[layName] =0
//フェイドスイッチ引数省略時初期値(不透明から透明へ)
if(!arguments[1]) swt = -1
//引数swtが -1 なら不透明から透明へ
// 1 なら透明から不透明へフェイドする
if(swt==-1) var f = "9876543210"
else if(swt==1) var f = "0123456789"
else var f = "9876543210"
//停止不透明度引数省略時初期値
if(!arguments[2] && swt==-1) stopOpacity = 0
else if(!arguments[2] && swt==1) stopOpacity = 10
//フェイド処理
if( fadeOpacity[layName] < f.length-1 ){
//カウンター番目の文字列を取り出す
var opa = f.charAt(fadeOpacity[layName])/10
//終了時不透明度なら終了
if( opa == stopOpacity ){
setOpacity(layName,stopOpacity) //終了
fadeOpacity[layName] = 0 //リセット
return
}
// 不透明度変更を実行する
setOpacity(layName,opa)
// カウンターを加算
fadeOpacity[layName]++
//--50/1000秒後にfadeOpacityを再実行
setTimeout('fadeOpacity("'+layName+'","'+swt+'","'+stopOpacity+'")',50)
} else {
//終了
setOpacity(layName,stopOpacity)
//--リセット
fadeOpacity[layName] = 0
}
}
function setOpacity(layName,arg) {
//arg は 0透明 1不透明
//n4やmac-e4などopacity未対応は0以下で代替処理としてhiddenする
var ua = navigator.userAgent
if( window.opera ) return //o6,o7
if( document.layers ) //n4
var oj = document.layers[layName]
else if( document.all ) //e4,e5,e6
var oj = document.all(layName).style
else if( document.getElementById ) //n6,n7,m1,s1
var oj =document.getElementById(layName).style
if(document.layers ||
ua.indexOf('Mac_PowerPC') !=-1 && document.all ||
ua.indexOf('Safari') !=-1 ) { //n4,mac-e4,mac-e5,s1
//opacityの使えないブラウザ用代替処理
if(arg>0) oj.visibility='visible'
else if(arg<=0) oj.visibility='hidden'
} else if(document.all) { //win-e4,win-e5,win-e6
document.all(layName).style.filter="alpha(opacity=0)"
document.all(layName).filters.alpha.Opacity = (arg * 100)
} else if(ua.indexOf('Gecko')!=-1) //n6,n7,m1
document.getElementById(layName).style.MozOpacity = arg
}
Example
<script type='text/javascript'>
<!--
//--フェイド関数
function fadeOpacity(layName,swt,stopOpacity){
if(!window.fadeOpacity[layName]) //カウンター初期化
fadeOpacity[layName] =0
//フェイドスイッチ引数省略時初期値(不透明から透明へ)
if(!arguments[1]) swt = -1
//引数swtが -1 なら不透明から透明へ
// 1 なら透明から不透明へフェイドする
if(swt==-1) var f = "9876543210"
else if(swt==1) var f = "0123456789"
else var f = "9876543210"
//停止不透明度引数省略時初期値
if(!arguments[2] && swt==-1) stopOpacity = 0
else if(!arguments[2] && swt==1) stopOpacity = 10
//フェイド処理
if( fadeOpacity[layName] < f.length-1 ){
//カウンター番目の文字列を取り出す
var opa = f.charAt(fadeOpacity[layName])/10
//終了時不透明度なら終了
if( opa == stopOpacity ){
setOpacity(layName,stopOpacity) //終了
fadeOpacity[layName] = 0 //リセット
return
}
// 不透明度変更を実行する
setOpacity(layName,opa)
// カウンターを加算
fadeOpacity[layName]++
//--50/1000秒後にfadeOpacityを再実行
setTimeout('fadeOpacity("'+layName+'","'+swt+'","'+stopOpacity+'")',50)
} else {
//終了
setOpacity(layName,stopOpacity)
//--リセット
fadeOpacity[layName] = 0
}
}
function setOpacity(layName,arg) {
//arg は 0透明 1不透明
//n4やmac-e4などopacity未対応は0以下で代替処理としてhiddenする
var ua = navigator.userAgent
if( window.opera ) return //o6,o7
if( document.layers ) //n4
var oj = document.layers[layName]
else if( document.all ) //e4,e5,e6
var oj = document.all(layName).style
else if( document.getElementById ) //n6,n7,m1,s1
var oj =document.getElementById(layName).style
if(document.layers ||
ua.indexOf('Mac_PowerPC') !=-1 && document.all ||
ua.indexOf('Safari') !=-1 ) { //n4,mac-e4,mac-e5,s1
//opacityの使えないブラウザ用代替処理
if(arg>0) oj.visibility='visible'
else if(arg<=0) oj.visibility='hidden'
} else if(document.all) { //win-e4,win-e5,win-e6
document.all(layName).style.filter="alpha(opacity=0)"
document.all(layName).filters.alpha.Opacity = (arg * 100)
} else if(ua.indexOf('Gecko')!=-1) //n6,n7,m1
document.getElementById(layName).style.MozOpacity = arg
}
//-->
</script>
<form>
<input type = "button" value = "fadeOpacity('a1',-1) 透明へ"
onclick = "fadeOpacity('a1',-1)">
<input type = "button" value = "fadeOpacity('a1',1) 不透明へ"
onclick = "fadeOpacity('a1',1)">
<input type = "button" value = "fadeOpacity('a1',-1,0.5) 不透明へ 0.5 で停止"
onclick = "fadeOpacity('a1',-1,0.5)">
</form>
<!--背景色画像用レイヤー///////////////-->
<div id="a0"
style="position : absolute ;
left : 150px ;
top : 100px ;">
<img src="../moku.gif" width="100" height="100"></div>
<!--↓このレイヤーの透明度をフェイドします///////////////-->
<div id="a1"
style="position : absolute ;
left : 200px ;
top : 120px ;">
<img src="../yellowbar.gif" width="100" height="100">
</div>
