Princess Party

Princess Party - 網頁教學

主選單

網頁教學

霧化遮蓋圖片顯示

2008/05/22 (Thu)
  • 此特效能讓圖片在同框架在霧化的背景下顯示圖片,作為點圖放大或是照片瀏覽器時會有不錯的效果!
    使用前需先下載 http://rei.idv.tw/sample/parts/popup.js 這個檔案,並將其與 html 放置於同資料夾下。

原始碼

設定方式

  • 【修改霧化區塊的設定方式】
     在 Style 區域裡面第 3 行的 top: 70px; 這一段,代表的意思是圖片在霧化區塊中上方間距。
     後面的 text-align: center; 這一段,代表圖片在霧化區塊中的顯示位置,若要改為置左或置右,可自行指定為 left 或 right。
     第 4 行的 border: 3px solid #fff; 是給圖片在霧化區塊裡加上邊框,若要給圖片加任何 CSS 效果都可以在這裡自行修改。
     第 5 行的 background: #000; 是霧化區塊的顏色,預設為黑霧,若要改成其他顏色可以自行在此修改色碼。

    【注意事項】
     此特效必須要包在一組 <div id="main"></div> 之間。
     <noscript> 區為無法使用 Java Script 時的替代效果。

取材網站

相關回應

請問

2010/10/21 (Thu)
  • 請問google瀏覽器有許多html都不支援嗎?
    很多時候我用google開啟都沒有效果
  • Edit / Delete
     

Rei

No Subject

2010/10/22 (Fri)
  • 那得看用的是什麼語法
    一般來說規範裡的語法都是支援的
    甚至CSS3的部分也只有Google瀏覽器支援的最完整

    會看到不支援的語法,多半都是IE或其他瀏覽器的專屬語法才會不支援
  • Mail
  • Home
  • Edit / Delete
     

 

2010/10/24 (Sun)

發表回應

您可以利用以下表單發表您對本篇的回應

  • 表情:            
紙娃娃設定

次選單

訪客人次

  • Total: 104947
  • Today: 02
  • Yesterday: 02

新作塗鴉

  • ルイズルイズ by Rei
    2009/08/20(Thu)14:42:54

最近迴響

  • 麥莉外送: 麥莉LINE:clear258 麥莉Skype: clear258 ...
  • 麥莉外送: ---------- 緣分專線·性福通道 ----------...
  • chyuanyiin: 請問目前有兩個測試選單主目錄,如果點開第...
  • Rei: 話雖如此,其實我也好久沒更新了 XDDDDD ...
  • 雪山春曉: 久未造訪,網站變好美,忍不住想留言打個...
  • JasonChan: 本人是一名香港學生,現正進行學校的SBA校...
  • 小喵: 您好, 據說 piaip 大大有修正 Applocale...
  • sanyoteco2006: 本店在桃園縣市地區服務已超過20餘年,為...
  • Benson: Hello 你好!! 我有一個網頁 想要增加您...
  • vic: 關於讀入式物件淡出 在IE7下好像會變半透...

素材版權

  • Princess PartyDesign: Rei
  • 幻想素材サイトFirst MoonSozai: 糸宇 睦月

標籤貼紙

  • Valid XHTML 1.0
  • Valid CSS 2.1
  • WCAG 1.0 Triple-A