請問一下, 這個選單的特效是怎麼做的?

http://www.catoecountry.net/Tutorials/

這個網頁左邊的選單, 選單項目的底線會慢慢出現, 這是怎麼做的呢?

有人知道嗎?

4 個解答

評分
  • 1 0 年前
    最佳解答

    CSS濾鏡

    2006-08-30 09:06:40 補充:

    先建一個檔案 副檔名 .htc 例: link.htc

    <public:component>

    <public:attach event="onmouseover" onevent="domouseover()">

    <public:attach event="onmouseout" onevent="domouseout()">

    <script language="javascript">

    function domouseover()

    {

    with(element)

    {

    filters.item(0).Apply();

    filters.item(0).Play();

    }

    }

    function domouseout()

    {

    with(element)

    {

    filters.item(0).Apply();

    filters.item(0).Play();

    }

    }

    </script>

    </public:component>

    在<head>..</head>之間插入底下的

    <style type="text/css">

    A:link{color:#DEDACF; text-decoration:none;}

    A:visited{color:#DEDACF;text-decoration:none;}

    A:hover{color:#DEDACF;text-decoration:underline;}

    A{cursor:default;height:1px;behavior:url(link.htc);filter:progid:dximagetransform.microsoft.gradientwipe(duration=1)}

    </style>

    如果你已經有設定CSS 那就將a:link a:visited a:hover顏色設為一樣 a:hover加底線

    (顏色不一樣也有其它效果啦)

    最後一行是設定濾鏡

    要換濾鏡 將上面這行的.gradientwipe換成以下任一

    (例:

    A{cursor:default;height:1px;behavior:url(link.htc);filter:progid:dximagetransform.microsoft.gradientwipe(duration=1)}

    改成

    A{cursor:default;height:1px;behavior:url(link.htc);filter:progid:dximagetransform.microsoft.fade(duration=1)}

    ↓自己選濾鏡↓

    gradientwipe

    barn(sProperties)

    zigzag(GridSizeX=5, GridSizeY=5)

    zigzag

    randomdissolve

    blinds

    checkerboard

    iris

    pixelate

    radialwipe

    fade

    inset

    randombars

    slide

    spiral

    stretch

    strips

    wheel

    2006-08-30 09:10:23 補充:

    打完才發現好像排的有點亂就是建HTC檔, 然後在<STYLE>加上這行濾鏡就對嚕@@A{cursor:default;height:1px;behavior:url(link.htc);filter:progid:dximagetransform.microsoft.gradientwipe(duration=1)}

    2006-08-30 14:18:12 補充:

    <style type="text/css">

    A{cursor:default;height:1px;filter:progid:dximagetransform.microsoft.gradientwipe(duration=1)}

    </style>

    2006-08-30 14:18:25 補充:

    <script>

    function domouseover() {

    i1.filters.item(0).Apply();

    i1.filters.item(0).Play();

    }

    function domouseout() {

    i1.filters.item(0).Apply();

    i1.filters.item(0).Play();

    }

    </script>

    2006-08-30 14:19:31 補充:

    <a href="#" id="i1" onmouseover="domouseover()" onmouseout="domouseout()">連結文字</a>

    字數太長 @@"

  • 1 0 年前

    謝謝~又學一招~

  • 請問一下, 若我只有一個CSS檔可以修改的話..有辦法把script放到CSS檔案中嗎?

  • 1 0 年前

    那個應該是jave的東西吧

還有問題?馬上發問,尋求解答。