wipeCLIP()
クリップを少しずつ大きくしたり小さくすることでレイヤ−にワイプをかけて出したり消したりします。
スタ−ト位置、終了位置をピクセル単位で指定します。色はnullで透明です。
*このファンクションをコピーして<script>と</script>の間にペーストしておくだけでこの機能をクロスブラウザに利用できるようになります。
Cross-Browser のための Sample Function
//--レイヤ−名で処理する場合
Syntax : wipeCLIP('レイヤ−名',初期上辺,初期右辺,初期下辺,初期左辺,背景色
,終了上辺,終了右辺,終了下辺,終了左辺,ステップ数)
var wipIniFlag=false
var t,r,b,l
var wiptID=setTimeout('',1)
//e4,e5,e6,n4,n6,n7,m1,s1用
function wipeCLIP(layName,stT,stR,stB,stL,color,edT,edR,edB,edL,step){
if(!wipIniFlag){ //--wipe ini
t=stT;r=stR;b=stB;l=stL;
stepT=(Math.max(t,edT)-Math.min(t,edT))/step //--step計算
stepR=(Math.max(r,edR)-Math.min(r,edR))/step
stepB=(Math.max(b,edB)-Math.min(b,edB))/step
stepL=(Math.max(l,edL)-Math.min(l,edL))/step
clipvalue = t+','+r+','+b+','+l+',"'
clipvalue += color+'",'
clipvalue += edT+','+edR+','+edB+','+edL+','+step
if(document.all)
document.all(layName).style.backgroundColor=color
else if(document.getElementById)
document.getElementById(layName).style.backgroundColor=color
else if(document.layers)document.layers[layName].bgColor=color
wipIniFlag=true
}
if(t>edT)t-=stepT
if(redL)l-=stepL
if(!(t>edT)&&!(redL)){
clearTimeout(wiptID)
}else{
wiptID=setTimeout('wipeCLIP("'+layName+'",'+clipvalue+')',10)
}
//Safariの場合はwith,heightをclipに合わせる
if(navigator.userAgent.indexOf('Safari')!=-1){
with(document.getElementById(layName).style){
width=r
height=b
}
}
//e*clipがレイヤ−より大きい時clipに合わせる
if(document.all){
with(document.all(layName).style){
if(pixelWidth < r)pixelWidth=r
if(pixelHeight < b)pixelHeight=b
}
}
//--clipをセットする
var clipst = 'rect('+parseInt(t)+','+parseInt(r)+','
+parseInt(b)+','+parseInt(l)+')'
if(document.getElementById) //e5,e6,n6,n7,m1,s1用
document.getElementById(layName).style.clip = clipst
else if(document.layers) //n4用
with(document.layers[layName].clip){
top = parseInt(t) ; right = parseInt(r)
bottom = parseInt(b) ; left = parseInt(l)
}
else if(document.all) //e4用
document.all(layName).style.clip=clipst
}
Example
<script type='text/javascript'>
<!--
var wipIniFlag=false
var t,r,b,l
var wiptID=setTimeout('',1)
//e4,e5,e6,n4,n6,n7,m1,s1用
function wipeCLIP(layName,stT,stR,stB,stL,color,edT,edR,edB,edL,step){
if(!wipIniFlag){ //--wipe ini
t=stT;r=stR;b=stB;l=stL;
stepT=(Math.max(t,edT)-Math.min(t,edT))/step //--step計算
stepR=(Math.max(r,edR)-Math.min(r,edR))/step
stepB=(Math.max(b,edB)-Math.min(b,edB))/step
stepL=(Math.max(l,edL)-Math.min(l,edL))/step
clipvalue = t+','+r+','+b+','+l+',"'
clipvalue += color+'",'
clipvalue += edT+','+edR+','+edB+','+edL+','+step
if(document.all)
document.all(layName).style.backgroundColor=color
else if(document.getElementById)
document.getElementById(layName).style.backgroundColor=color
else if(document.layers)document.layers[layName].bgColor=color
wipIniFlag=true
}
if(t>edT)t-=stepT
if(redL)l-=stepL
if(!(t>edT)&&!(redL)){
clearTimeout(wiptID)
}else{
wiptID=setTimeout('wipeCLIP("'+layName+'",'+clipvalue+')',10)
}
//Safariの場合はwith,heightをclipに合わせる
if(navigator.userAgent.indexOf('Safari')!=-1){
with(document.getElementById(layName).style){
width=r
height=b
}
}
//e*clipがレイヤ−より大きい時clipに合わせる
if(document.all){
with(document.all(layName).style){
if(pixelWidth < r)pixelWidth=r
if(pixelHeight < b)pixelHeight=b
}
}
//--clipをセットする
var clipst = 'rect('+parseInt(t)+','+parseInt(r)+','
+parseInt(b)+','+parseInt(l)+')'
if(document.getElementById) //e5,e6,n6,n7,m1,s1用
document.getElementById(layName).style.clip = clipst
else if(document.layers) //n4用
with(document.layers[layName].clip){
top = parseInt(t) ; right = parseInt(r)
bottom = parseInt(b) ; left = parseInt(l)
}
else if(document.all) //e4用
document.all(layName).style.clip=clipst
}
//-->
</script>
<div id="sheet1" style="position : absolute ;
left : 150px ;
top : 100px ;
font-family : Osaka,Arial ;
font-size : 20pt ;
/*--初めはサイズを小さくして隠しておきます--*/
width : 0px ;
height : 0px ;
clip : rect(0,0,0,0) ;">
TEST
</div>
<div id="a0" style="f12pt">
<a href="javascript:void(0)"
onClick="wipIniFlag = false ;
wipeCLIP('sheet1',0,0,0,0,'yellow',0,200,100,0,30)"
>黄色、左上から、30step</a><br>
<a href="javascript:void(0)"
onClick="wipIniFlag = false ;
wipeCLIP('sheet1',50,100,50,100,'green',0,200,100,0,50)"
>緑、中心から、50step</a><br>
<a href="javascript:void(0)"
onClick="wipIniFlag = false ;
wipeCLIP('sheet1',100,200,100,0,'orange',0,200,100,0,40)"
>オレンジ、下から、40step</a>
</div>