fadeBGCOLOR()
レイヤ−の背景色を指定色から指定色へフェイドするサンプルファンクションです。
フェイドインフェイドアウトはsetBGCOLOR()で背景色をtimer/1000秒毎に変化させることで実現しています。最後の引数省略すると終了時に透明になります。
引数の詳細はソースのコメントを参照してください。
*このファンクションをコピーして<script>と</script>の間にペーストしておくだけでこの機能をクロスブラウザに利用できるようになります。
*widthとheightとclipの指定はn4対策なので、もし、n4を対象としない場合には無視しても他のブラウザでは問題はありません。
Cross-Browser のための Sample Function
//--レイヤ−名で処理する場合
Syntax : fadeBGCOLOR('レイヤ−名',開始色,終了色,timer,完了時透明)
function fadeBGCOLOR(layName,sColor,eColor,timer,trns){
//初期化
if(!window.fadeBGCOLOR[layName]){
if(!window.fadeBGCOLOR.arguments[1])
sColor='#000000' //デフォルト開始色
if(!window.fadeBGCOLOR.arguments[2])
eColor='#ffffff' //デフォルト終了色
else if(eColor==''||eColor=='transparent')
var endTranspar='on' //完了時透明指定
if(!window.fadeBGCOLOR.arguments[3])
timer ='30' //書き換え間隔(1/1000秒単位)
if(!window.fadeBGCOLOR.arguments[4])
endTranspar='on'//完了時透明指定
else endTranspar=trns
//16進指定色分解c&10進数化&開始から終了までの差分
var s=sColor.split('') //開始色分解
var e=eColor.split('') //終了色分解
var saR = parseInt(''+ e[1]+ e[2],16)
-parseInt(''+ s[1]+ s[2],16)//R
var saG = parseInt(''+ e[3]+ e[4],16)
-parseInt(''+ s[3]+ s[4],16)//G
var saB = parseInt(''+ e[5]+ e[6],16)
-parseInt(''+ s[5]+ s[6],16)//B
//加減設定(開始時より終了時が少なければ-1)
var kaR,kaG,kaB //加減R,加減G,加減B
if(saR<=-1){kaR=-1}else if(saR>=1){kaR=+1}else{kaR=0}
if(saG<=-1){kaG=-1}else if(saG>=1){kaG=+1}else{kaG=0}
if(saB<=-1){kaB=-1}else if(saB>=1){kaB=+1}else{kaB=0}
//初期値セット[カウント,R差分,G差分,B差分
// ,加減R,加減G,加減B
// ,終了色R,終了色G,終了色B
// ,書き換え間隔,完了時透明指定]
fadeBGCOLOR[layName]= [0,parseInt(Math.abs(saR)/16,10)
,parseInt(Math.abs(saG)/16,10)
,parseInt(Math.abs(saB)/16,10)
,kaR,kaG,kaB
,parseInt(''+ e[1]+ e[2],16)
,parseInt(''+ e[3]+ e[4],16)
,parseInt(''+ e[5]+ e[6],16)
,timer,endTranspar,0,'']
//16進変換用配列
fto0 = new Array( '0','1','2','3','4','5','6','7'
,'8','9','a','b','c','d','e','f')
}
if(!sColor)return //エラー時無視
//作業用配列
var wk = fadeBGCOLOR[layName] //初期値のコピー
var c = new Array() //各色用
var run = new Array() //10進現在色用
//16進現在色取得 カラー分解&10進数化
s=sColor.split('')
run[1] = parseInt(''+ s[1]+ s[2],16) //Red
run[2] = parseInt(''+ s[3]+ s[4],16) //Green
run[3] = parseInt(''+ s[5]+ s[6],16) //Blue
//フェイド作業
if( wk[0] < 16 ){
for( i=1 ; i<=3 ; i++){
c[i] = run[i] + wk[i]*wk[(3+i)] //現在色へ加減
c[i] <= 0 ? c[i] = 0 : c[i] = c[i] //0で停止
c[i] >= 255? c[i] =255 : c[i] = c[i] //255で停止
if(wk[(3+i)]==1) //終了色で停止
c[i] >= wk[(6+i)]?c[i]=wk[(6+i)]:c[i]=c[i]
else
c[i] <= wk[(6+i)]?c[i]=wk[(6+i)]:c[i]=c[i]
//16進数へ変換
c[i] = fto0[Math.floor(c[i]/(16))]
+ fto0[Math.floor(c[i]%(16))]
}
var cl=c[1] + c[2] + c[3]
setBGCOLOR( layName , '#'+cl )
fadeBGCOLOR[layName][0] ++
clearTimeout(wk[12])
//再帰
wk[12]=setTimeout('fadeBGCOLOR("'+layName+'","#'+cl
+'","'+eColor+'","'+wk[10]+'","'+wk[11]+'","'+1+'")',wk[10] )
} else {
//--リセット(完了時透明がoff以外は背景色を透明に戻す)
if(wk[11]!='off') setBGCOLOR( layName , '' )
clearTimeout(wk[12])
fadeBGCOLOR[layName]=0
}
}
function setBGCOLOR(layName,color){
//opera6 は透明が効かないのでページ背景色と同色(ここではwhite)へ便宜修正
if(color=='')(navigator.userAgent.search("Opera(\ |\/)6")!= -1)
?color='white':color='transparent'; //←このwhiteを背景色に書換える
if(document.getElementById) //e5,e6,n6,n7,m1,o6,o7,s1用
document.getElementById(layName).style.backgroundColor =color
else if(document.all) //e4用
document.all(layName).style.backgroundColor=color
else if(document.layers){ //n4用
if(color=='transparent')color=null
document.layers[layName].bgColor=color
}
}
Example
<script type='text/javascript'>
<!--
/*//////////// 背景色フェイド用関数関数 20030416 UseFree
========================================================
Win n4 n6 moz e4 e5 e6 o6(o6は透明不可) o7
Mac n4 n6 moz e4.5 e5 o6(o6は透明不可) Safari
Linux n4 n6 moz o6(o6は透明不可) o7
n4,o6,Safari以外はフォームでも動作します。
========================================================
//レイヤ−の背景色をフェイドする
書式
fadeBGCOLOR('レイヤ−名',開始色,終了色,timer,完了時透明)
レイヤ−名 対象レイヤーのid名
開始色 '#nnnnnn'の形式でフェイド開始色を指定する
終了色 '#nnnnnn'の形式でフェイド終了色を指定する
(完了時に終了色で止めたい時は完了時透明をoff)
timer 書き換える間隔(1/1000秒単位 初期値'30')
完了時透明 'off'で終了色(省略時は透明になる)
使用例
fadeBGCOLOR('lay1')
fadeBGCOLOR('lay1','#000000','')
fadeBGCOLOR('lay1','#ffffff','#6666CC')
fadeBGCOLOR('lay1','#ff0000','#ffffff','100')
fadeBGCOLOR('lay1','#ff0000','#0000ff','','on')
Support http://game.gr.jp/js/
=======================================================*/
function fadeBGCOLOR(layName,sColor,eColor,timer,trns){
//初期化
if(!window.fadeBGCOLOR[layName]){
if(!window.fadeBGCOLOR.arguments[1])
sColor='#000000' //デフォルト開始色
if(!window.fadeBGCOLOR.arguments[2])
eColor='#ffffff' //デフォルト終了色
else if(eColor==''||eColor=='transparent')
var endTranspar='on' //完了時透明指定
if(!window.fadeBGCOLOR.arguments[3])
timer ='30' //書き換え間隔(1/1000秒単位)
if(!window.fadeBGCOLOR.arguments[4])
endTranspar='on'//完了時透明指定
else endTranspar=trns
//16進指定色分解c&10進数化&開始から終了までの差分
var s=sColor.split('') //開始色分解
var e=eColor.split('') //終了色分解
var saR = parseInt(''+ e[1]+ e[2],16)
-parseInt(''+ s[1]+ s[2],16)//R
var saG = parseInt(''+ e[3]+ e[4],16)
-parseInt(''+ s[3]+ s[4],16)//G
var saB = parseInt(''+ e[5]+ e[6],16)
-parseInt(''+ s[5]+ s[6],16)//B
//加減設定(開始時より終了時が少なければ-1)
var kaR,kaG,kaB //加減R,加減G,加減B
if(saR<=-1){kaR=-1}else if(saR>=1){kaR=+1}else{kaR=0}
if(saG<=-1){kaG=-1}else if(saG>=1){kaG=+1}else{kaG=0}
if(saB<=-1){kaB=-1}else if(saB>=1){kaB=+1}else{kaB=0}
//初期値セット[カウント,R差分,G差分,B差分
// ,加減R,加減G,加減B
// ,終了色R,終了色G,終了色B
// ,書き換え間隔,完了時透明指定]
fadeBGCOLOR[layName]= [0,parseInt(Math.abs(saR)/16,10)
,parseInt(Math.abs(saG)/16,10)
,parseInt(Math.abs(saB)/16,10)
,kaR,kaG,kaB
,parseInt(''+ e[1]+ e[2],16)
,parseInt(''+ e[3]+ e[4],16)
,parseInt(''+ e[5]+ e[6],16)
,timer,endTranspar,0,'']
//16進変換用配列
fto0 = new Array( '0','1','2','3','4','5','6','7'
,'8','9','a','b','c','d','e','f')
}
if(!sColor)return //エラー時無視
//作業用配列
var wk = fadeBGCOLOR[layName] //初期値のコピー
var c = new Array() //各色用
var run = new Array() //10進現在色用
//16進現在色取得 カラー分解&10進数化
s=sColor.split('')
run[1] = parseInt(''+ s[1]+ s[2],16) //Red
run[2] = parseInt(''+ s[3]+ s[4],16) //Green
run[3] = parseInt(''+ s[5]+ s[6],16) //Blue
//フェイド作業
if( wk[0] < 16 ){
for( i=1 ; i<=3 ; i++){
c[i] = run[i] + wk[i]*wk[(3+i)] //現在色へ加減
c[i] <= 0 ? c[i] = 0 : c[i] = c[i] //0で停止
c[i] >= 255? c[i] =255 : c[i] = c[i] //255で停止
if(wk[(3+i)]==1) //終了色で停止
c[i] >= wk[(6+i)]?c[i]=wk[(6+i)]:c[i]=c[i]
else
c[i] <= wk[(6+i)]?c[i]=wk[(6+i)]:c[i]=c[i]
//16進数へ変換
c[i] = fto0[Math.floor(c[i]/(16))]
+ fto0[Math.floor(c[i]%(16))]
}
var cl=c[1] + c[2] + c[3]
setBGCOLOR( layName , '#'+cl )
fadeBGCOLOR[layName][0] ++
clearTimeout(wk[12])
//再帰
wk[12]=setTimeout('fadeBGCOLOR("'+layName+'","#'+cl
+'","'+eColor+'","'+wk[10]+'","'+wk[11]+'","'+1+'")',wk[10] )
} else {
//--リセット(完了時透明がoff以外は背景色を透明に戻す)
if(wk[11]!='off') setBGCOLOR( layName , '' )
clearTimeout(wk[12])
fadeBGCOLOR[layName]=0
}
}
function setBGCOLOR(layName,color){
//opera6 は透明が効かないのでページ背景色と同色(ここではwhite)へ便宜修正
if(color=='')(navigator.userAgent.search("Opera(\ |\/)6")!= -1)
?color='white':color='transparent'; //←このwhiteを背景色に書換える
if(document.getElementById) //e5,e6,n6,n7,m1,o6,o7,s1用
document.getElementById(layName).style.backgroundColor =color
else if(document.all) //e4用
document.all(layName).style.backgroundColor=color
else if(document.layers){ //n4用
if(color=='transparent')color=null
document.layers[layName].bgColor=color
}
}
/*////////////////////// 背景色フェイド用関数ここまで */
//-->
</script>
<!--このレイヤ−の背景色が変わります///////////////-->
<div id="a1" calss="lays"
style="position:absolute;left:150px;top:110px;padding:2px;
width:320px;height:20;clip:rect(0,320,20,0)">
<a href="http://allabout.co.jp/computer/javascript/closeup/CU20010415/"
target="a"
onmouseover="fadeBGCOLOR('a1','#ffffff','#6666CC','40','off')">
<font color="orange">fadeBGCOLOR('a1','#ffffff','#6666CC','40','off')</font> </a>
</div>
<!--このレイヤ−の背景色が変わります///////////////-->
<div id="b0" calss="lays"
style="position:absolute;left:150px;top:140px;padding:2px;
width:320px;height:20;clip:rect(0,320,20,0)">
<a href="http://allabout.co.jp/computer/javascript/closeup/CU20010415/"
target="b"
onmouseover="fadeBGCOLOR('b0','#ff0000','#ffcc00','50','off')">
<font color="orange">fadeBGCOLOR('b0','#ff0000','#0000ff','50','off')</font> </a>
</div>
<!--このレイヤ−の背景色が変わります///////////////-->
<div id="b1" calss="lays"
style="position:absolute;left:150px;top:170px;padding:2px;
width:320px;height:20;clip:rect(0,320,20,0)">
<a href="http://allabout.co.jp/computer/javascript/closeup/CU20010415/"
target="b"
onmouseover="fadeBGCOLOR('b1','#ffffff','#009900','60','off')">
<font color="orange">fadeBGCOLOR('b1','#ffffff','#009900','60','off')</font> </a>
</div>