再來一篇換湯不換藥的範例,我們稱它為滑動廣告!其觀念是與前篇一模一樣,僅僅是 HTML 結構不一樣而已!請各位仔細聽我說來…

若還不熟悉請見以下兩篇文章~


簡單的描述一下 <div> 的關鍵屬性:

  • <div.mask>:設定 overflow 為 hidden,將超出範圍的部份隱藏起來。
  • <div.boxWrap>:包覆 <div.box1> 與 <div.bo2> 區塊,便於移動控制。
  • <div.box1>:放入所需資訊。
  • <div.box2>:放入所需資訊。

載入畫面後的一般狀態如下圖左所示;當滑鼠滑入(:hover)到 <div.boxWrap> 時,區塊屬性的變化如下圖右所示:

圖解

聰明的各位是不是已經發現不同點了呢?

沒錯!就是在滑入的狀態時,<div.boxWrap> 區塊的 margin-top 的屬性值設定為 -179 px,使得整個區塊往上移動。由於上層區塊(父層)<div.mask> 設定了 overflow 屬性,所以超出 <div.mask> 的部份得以隱藏。接下來,我們就來看一下 CSS3 coding。

載入畫面時的一般狀態,其 CSS 設定如下:

.boxWrap{
	width: 240px;
	transition:margin-top .5s ease-out;
	-moz-transition:margin-top .5s ease-out;
	-webkit-transition:margin-top .5s ease-out;
	-o-transition:margin-top .5s ease-out;
	-ms-transition:margin-top .5s ease-out;
}

再來…加上擬類別的( :hover )狀態,並設定其屬性值即可完成。

.boxWrap:hover{ margin-top:-179px;}