HOME 　>>> 　HTML整理ノート 　>>> DHTML -- 基本編　　　応用編

Wave（波動）フィルタ

これはWaveフィルタです

これもWaveフィルタです

■右の画像にWaveフィルタを適用します。

［動くWave］ ［動くWaveを止める］

　

　

■ページ全体にWaveフィルタをかけます。----→

　

Sample Source......................................................................>>>

<script language="JavaScript"><!--
function FilWave(){         //画像にWaveをかける
    if(btWave.innerText == "Wave(波動)"){
        D1.style.filter = "wave(freq=3,strength=7,phase=20,
                lightstrength=70,add=0,enabled=1)";
        btWave.innerText = "元に戻す";
    }else{
        D1.style.filter ="nothing";//ﾌｨﾙﾀの取消し
        btWave.innerText = "Wave(波動)";//ﾎﾞﾀﾝ名を変える
    }
}

function FilBodyWave(){    //ﾍﾟｰｼﾞ全体にWaveをかける
    if(pWave.innerText == "ﾍﾟｰｼﾞ全体をWave"){
        by.style.backgroundColor = "green";
        by.style.filter = "wave(freq=3,strength=7,phase=20,
                lightstrength=70,add=0,enabled=1)";
        pWave.innerText = "元に戻す";
    }else{
        by.style.backgroundColor = "";
        by.style.filter ="nothing";//ﾌｨﾙﾀの取消し
        pWave.innerText = "ﾍﾟｰｼﾞ全体をWave";
    }
}

var w = 0;
var TimerID;
function FilWaveMove(){ //動くWaveを開始
    D1.style.filter = "wave(freq=2,strength=3,
                phase=0,lightstrength=50,add=0)";
    WaveMove();
}
function WaveMove(){
    w += 7;
    D1.filters[0].phase=w;
    TimerID=setTimeout("WaveMove()",80);
}
function WaveStop(){
    D1.style.filter = "nothing";
clearTimeout(TimerID);
}   
//--></script>
</head>

<body id="by">
<div style="width:300;font-size:24pt;color:forestgreen;
    filter:wave(freq=3,strength=2,phase=8,
        lightstrength=2,add=0)">
    <p>これはWaveﾌｨﾙﾀです </p>
</div>
<div style="width:300;background-color:pink;
    border:inset blue thin;font-size:24pt;color:darkblue;
    filter:wave(freq=3,strength=4,phase=8,lightstrength=2,add=0)">
    <p>これもWaveﾌｨﾙﾀです</p>
</div>

<p>■右の画像にWaveﾌｨﾙﾀを適用します。</p>
<button id="btWave" style="color:blue;font:12pt 'ＭＳ 明朝';"
       onclick="FilWave();">Wave(波動)
</button>

<p style="color:blue">
    <span id="sp" onclick="FilWaveMove();">
        ［動くWave］</span>
    <span onclick="WaveStop();">
        ［動くWaveを止める］</span>
</p>
<div ID="D1" STYLE="position:absolute;
        top:150;left:260;width:230;height:170">
    <img src="../../java/jadata/ja02a.jpg"
        WIDTH="200" HEIGHT="150">
</div>

<p>■次のﾎﾞﾀﾝでﾍﾟｰｼﾞ全体にWaveﾌｨﾙﾀをかけます。<br>
<button id="pWave" style="color:blue;font:12pt 'ＭＳ 明朝';"
     onclick="FilBodyWave();">ﾍﾟｰｼﾞ全体をWave
</button> </p>

end(最終更新:12/11/12)