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

絵文字にWave効果

　

wm s

　

　

　

　

　

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

<style TYPE="text/css"><!--
    #sp1 {position:absolute;top:60;
            color:lime;font:160pt Webdings;
            filter:wave(freq=8,strength=1,
                phase=0,lightstrength=50,add=0)}
    #sp2 {position:absolute;top:50;left:160;
            color:blue;font:150pt Webdings;
            filter:wave(freq=2,strength=8,
                phase=0,lightstrength=50,add=0)}
    #sp3 {position:absolute;top:90;left:270;
            color:red;font:110pt Webdings;
            filter:wave(freq=30,strength=20,
                phase=0,lightstrength=70,add=0);}
--></style>
<script language="JavaScript"><!--
var str = 1;     //strength(波の幅)の値
var s = 1;        //strengthの増減値
var ph = 0;        //phase(波の開始位置)の値
var fre = 30;    //freq(波の数)の値
var f = 1;        //freqの増減値
var TimerID;
function WaveMove(){
    str += s;    //strength(波の幅)を増減値分変化さす
    sp1.filters["wave"].strength = str;//strengthを適用
    //strength数が30を超える、又は1より少なくなると
    //sの符号を反転する(増減を逆にする)
    if(sp1.filters["wave"].strength > 30 ||
        sp1.filters["wave"].strength < 1)s = -s;

    ph += 7;
    sp2.filters["wave"].phase = ph;

    fre -= f;
    sp3.filters["wave"].freq = fre;
    if(sp3.filters["wave"].freq > 30 ||
        sp3.filters["wave"].freq < 2)f = -f;
   
    TimerID=setTimeout("WaveMove()",100);
}

function StopGo(intxt){    //ﾎﾞﾀﾝでWaveの停止／再開
    if(intxt == "Wave停止"){
        clearTimeout(TimerID);
        bt.innerText = "Wave再開";
    }else{
        WaveMove();
        bt.innerText = "Wave停止";
    }
}
//--></script>
</head>

<body onload="WaveMove();">
<p>
    <span id="sp1">w</span>
    <span id="sp2">m</span>
    <span id="sp3">s</span>
</p>

<button id="bt" onclick="StopGo(this.innerText);">
    Wave停止</button>

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