rlin
Lv 6
rlin 發問時間: 電腦與網際網路程式設計 · 1 0 年前

我想要做滑鼠移過圖片的動畫???急~~~~幫幫忙吧~~~

我想要做滑鼠移過圖片的動畫???急~~~~幫幫忙吧~~~

像底下這個網站ㄧ樣的效果,滑鼠移過圖片的效果

請描述的簡單易懂......

http://bestmoban.com/moban/list.asp?flag=korea

已更新項目:

PS:現在就是有在做網頁,想要做這樣的特效,所以才要發問啊~~~

2 個解答

評分
  • jeff
    Lv 5
    1 0 年前
    最佳解答

    我有解決方法...給你個提示,使用javascript+Css...^_^

    如果你真的想要解答,寄信給我ㄅ..

    因為我不想先貼出來..替他人做白

    工..

    因為本人常常作先鋒(先答題),但最

    後卻中箭落馬...

    2006-06-02 11:25:24 補充:

    安安喔...我收到你的來信囉..抱歉那摸久才回覆你的問題,廢話不多說,我寫了一個範例,希望對你有幫助..請自行複製,存成網頁檔即可以..

    1.範例裡我顯示了3張圖片,分別是S1.jpg,S2.jpg,S3.jpg,其尺寸是71x71

    2.表格的尺寸是500x150

    所以囉如果你要多加圖片,請自行調整圖片與表格的寬與高的尺寸

    ------------------------------------ 範例原始碼 ------------------------------------------------

    <Html>

    <Head>

    <!-- 頁面標題-->

    <Title></Title>

    <!-- 繁體中文Meta標籤-->

    <meta http-equiv="Content-Language" content="zh-tw">

    <meta http-equiv="Content-Type" content="text/html; charset=big5">

    <!-- 定義頁面CSS樣式 -->

    <Style Rel="StyleSheet" Type="text/css">

    .TrOn{background-Color:#E1E1E1;}

    .TrOff{background-Color:#FFFFFF;}

    Td{Text-Align:Center;vertical-align:middle;}

    </Style>

    </Head>

    <Body BgColor="#FFFFFF">

    <Table CellSpacing="0" CellPadding="0" Width="500px" Height="150px"

    Border=1>

    <Tr>

    <Td OnMouseOver="this.className='TrOn';ImgFn('Img1','On')"

    OnMouseOut="this.className='TrOff';ImgFn('Img1','Off')">

    <!-- 顯示圖片1 -->

    <Img id="Img1" name="Img1" Src="S1.jpg" Border=0><Br>

    <!-- 顯示文字1 -->

    <Span Style="Font-Size:10pt">顯示文字1</Span><Br>

    </Td>

    <Td OnMouseOver="this.className='TrOn';ImgFn('Img2','On')"

    OnMouseOut="this.className='TrOff';ImgFn('Img2','Off')">

    <!-- 顯示圖片2 -->

    <Img id="Img2" name="Img2" Src="S2.jpg" Border=0><Br>

    <!-- 顯示文字2 -->

    <Span Style="Font-Size:10pt">顯示文字2</Span><Br>

    </Td>

    <Td OnMouseOver="this.className='TrOn';ImgFn('Img3','On')"

    OnMouseOut="this.className='TrOff';ImgFn('Img3','Off')">

    <!-- 顯示圖片3 -->

    <Img id="Img3" name="Img3" Src="S3.jpg" Border=0><Br>

    <!-- 顯示文字3 -->

    <Span Style="Font-Size:10pt">顯示文字3</Span><Br>

    </Td>

    </Tr>

    </Table>

    <p>

    <Script Language="Javascript">

    <!--

    function ImgFn(Obj_Id,iFlag)

    {

    //----------------------------------------------------------

    //圖片顯示底線函式

    //----------------------------------------------------------

    if(Obj_Id==""){return false;}

    if(iFlag==""){return false;}

    var o=document.getElementById(Obj_Id)

    if(o)

    {

    switch(iFlag.toLowerCase())

    {

    case "on":

       //當圖片被滑鼠移在上面時,顯示紅色底的虛線   

    o.style.borderBottom="1px Dashed #FF0000"

    break;

    case "off":

       //當圖片被滑鼠從上面移出時,將紅色底的虛線取消   

    o.style.borderBottom="none"

    break;

    }

    }

    }

    -->

    </Script>

    </Html>

    參考資料: 經驗+請勿抄襲+如要引用請標出處..謝謝
  • 1 0 年前

    我知道,可是那只有製作網頁時才可以喔!

    如果你有製作我會告訴你。

    謝謝!

    參考資料: ☆☆~~女亂馬筆~~☆☆
還有問題?馬上發問,尋求解答。