用CSS層疊樣式表實現文字變圖象特效

來源:互聯網
上載者:User
css|特效|樣式表

  一段文字,當滑鼠在文字上面單擊,文字消失,原來文字的地方卻立即變成了一張圖片,當滑鼠在圖片上單擊,圖片又消失,原來的文字又重現了,像變魔術一樣,是不是有意思?!這種效果用Dreamweaver的Behavirs 功能也可實現,但那要增加一段Javascript程式,明顯增加了不少代碼。而用CSS來製作這種效果,增加的代碼卻要少得多。

  原理:利用CSS的屬性值可動態改變的特點。

  思路:定義一個HTML元素CSS屬性的兩種屬性值,再用一個事件來觸發,一旦事件發生,則改變HTML元素的屬性值,從而達到預期目的。

  製作方法:

  1、在網頁中輸入一段文字,用“Span”標記把它括起來,並給它加一個CSS的“ID”屬性(也就是給這段文字編一個代號,如:“Text1”,以便識別);再插入一張圖片,同樣也用“Span”把它括起來,也給它加一個“ID”屬性,如:ID="image1";

  2、在網頁原始碼的〈head〉與〈/head〉之間加上下面這段CSS代碼:

  〈style type="text/css"〉
  〈!--
  .style1 { position:absolute; top: 200px; left:180px;
  background-color:#ccccff; visibility:hidden}
  .style2 { position:absolute; top: 200px; left:180px;
  background-color:#ccccff; }
  .style3 { position:absolute; top: 190px; left:180px;
  visibility:hidden}
  .style4 { position:absolute; top: 190px; left:180px; }
  --〉
  〈/style〉

  上述代碼中的“top”、“left”的值用於定位文本和圖片在網頁中位置,“backgroud-color”用於確定文本的背景顏色,這些屬性值要根據實際情況修改。visibility是決定當前對象是否顯示的CSS屬性,本例就是動態地改變這個屬性值來達到效果的;

  3、在“Text1 ”的那個“span”中載入CSS的“.style2”,讓那段文本一開始是顯示的,並再載入一個“onclick”觸發事件,一旦這個事件發生,將做兩件事,一是讓“Text1”採用CSS的“.style1”,把文本隱藏;二是讓“image1”採用CSS的“.style4”,讓圖象顯示。這樣,“Text1”及那段文本的代碼是這樣的:〈span id="text1" class="style2" 〉〈font color="#0000FF"〉滑鼠在這段文字上單擊,文字消失變為圖象。在圖象上單擊,圖象消失,恢複為文字。〈/font〉

  4、同樣在“image1 ”的那個“span”中載入CSS的“.style3”,讓那張圖片一開始是隱藏的,並再載入一個“onclick”觸發事件,一旦這個事件發生,將做兩件事,一是讓“Text1”採用CSS的“.style2”,把文本顯示;二是讓“image1”採用CSS的“.style3”,讓圖象隱藏。這樣,“image1”及那張圖片的代碼是這樣的:

  〈span id="image1" class="style3" 〉〈img src="http://www.webjx.com/images/NullPic.gif" width="316" height="26"〉〈/span〉

  上面代碼中“img”中的代碼在實際製作中將隨插入圖片的不同而改變。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。