ダリの雑記：WEBプログラム版

この記事は1年以上前の記事のため、内容が古い可能性があります。

■追記

その２ができました。

Bingのトップページのギミックが面白いなぁと思い、なんとかできないかと模索中。
たぶんsetTimeoutかsetInterval使ってるんだと思うけど、割り込み処理のやり方がいまいちわからない。
とりあえずテストバージョン

■コード

<script>
window.onload = function(){
//初期化
browser_type = browser();
if(browser_type == "MSIE"){
document.getElementById("fade01").style.filter = "alpha(opacity=0)";
document.getElementById("fade02").style.filter = "alpha(opacity=0)";
document.getElementById("fade03").style.filter = "alpha(opacity=0)";
document.getElementById("fade04").style.filter = "alpha(opacity=0)";
}else if(browser_type == "Firefox"){
document.getElementById("fade01").style.MozOpacity = 0;
document.getElementById("fade02").style.MozOpacity = 0;
document.getElementById("fade03").style.MozOpacity = 0;
document.getElementById("fade04").style.MozOpacity = 0;
}else{
document.getElementById("fade01").style.opacity = 0;
document.getElementById("fade02").style.opacity = 0;
document.getElementById("fade03").style.opacity = 0;
document.getElementById("fade04").style.opacity = 0;
}

//オートフェード
setTimeout("fadeIn('fade01')",1000);
setTimeout("fadeOut('fade01')",2000);
setTimeout("fadeIn('fade02')",1000);
setTimeout("fadeOut('fade02')",2100);
setTimeout("fadeIn('fade03')",1000);
setTimeout("fadeOut('fade03')",2200);
setTimeout("fadeIn('fade04')",1000);
setTimeout("fadeOut('fade04')",2300);
}

//フェードイン
function fadeIn(id_name){
fadeAction(id_name, "plus", 0);
}

//フェードアウト
function fadeOut(id_name){
fadeAction(id_name, "minus", 100);
}

//フェード関数
function fadeAction(id_name, vector, set_op){
set_op = parseInt(set_op);
elem = document.getElementById(id_name);
browser_type = browser();
if(browser_type == "MSIE"){
elem.style.filter = "alpha(opacity="+set_op+")";
}else if(browser_type == "Firefox"){
elem.style.MozOpacity = set_op / 100;
}else{
elem.style.opacity = set_op / 100;
}
if(vector == "minus"){
set_op -= 20;
if(set_op < 0) return;
setTimeout("fadeAction('"+id_name+"', 'minus', '"+set_op+"')",20);
}else if(vector == "plus"){
set_op += 20;
if(set_op >= 100) return;
setTimeout("fadeAction('"+id_name+"', 'plus', '"+set_op+"')",20);
}
}

//ブラウザ判別
function browser(){
if(navigator.userAgent.indexOf("Opera") != -1){
type = "Opera";
}else if(navigator.userAgent.indexOf("MSIE") != -1){
type = "MSIE";
}else if(navigator.userAgent.indexOf("Firefox") != -1){
type = "Firefox";
}else if(navigator.userAgent.indexOf("Netscape") != -1){
type = "Netscape";
}else if(navigator.userAgent.indexOf("Safari") != -1){
type = "Safari";
}else{
type = "none";
}
return type;
}
</script>

<p id="fade01" style="width:100px; cursor:default;" onmouseover="fadeIn('fade01');" onmouseout="fadeOut('fade01');">フェード１</p>
<p id="fade02" style="width:100px; cursor:default;" onmouseover="fadeIn('fade02');" onmouseout="fadeOut('fade02');">フェード２</p>
<p id="fade03" style="width:100px; cursor:default;" onmouseover="fadeIn('fade03');" onmouseout="fadeOut('fade03');">フェード３</p>
<p id="fade04" style="width:100px; cursor:default;" onmouseover="fadeIn('fade04');" onmouseout="fadeOut('fade04');">フェード４</p>

注意点として、フェードさせるブロックにはwidthを指定していないと、IEにてopacityが効きません。

サンプルはこちら　[新しいウィンドウで開く]

※以後サンプルはさくらインターネットの自分用サーバにアップします。