技術筆記 01 addlass()/removelass() 方法對指定的 HTML 元素附加 class 屬性可用 addlass() 方法, 刪除 class 屬性則用 removelass() 方法透過附加 / 刪除設定 SS 的類別, 就可改變該元素的樣式其與 animate() 方法不

Size: px

Start display at page:

Download "技術筆記 01 addlass()/removelass() 方法對指定的 HTML 元素附加 class 屬性可用 addlass() 方法, 刪除 class 屬性則用 removelass() 方法透過附加 / 刪除設定 SS 的類別, 就可改變該元素的樣式其與 animate() 方法不"

牡梨程
6 years ago
Views:

1 HAPTER 02 利用新增 / 刪除類別製作動畫 HAPTER01 中介紹如何使用 animate() 方法製作動畫, 但這方法只能對可設定數值的 SS 屬性進行變化, 下面將介紹針對 HTML 元素透過附加 / 移除 SS 的 class 樣式屬性製作動畫, 此方法對於非數值的 SS 屬性也可使用範例執行畫面範例資料夾 /PART01/HAPTER02/ 範例 1 範例 2 範例 3 垂直方向旋轉水平方向旋轉範例 4

2 技術筆記 01 addlass()/removelass() 方法對指定的 HTML 元素附加 class 屬性可用 addlass() 方法, 刪除 class 屬性則用 removelass() 方法透過附加 / 刪除設定 SS 的類別, 就可改變該元素的樣式其與 animate() 方法不同, 任何 SS 屬性都可使用, 合併使用 transition 與 transform 等 SS3 的動畫擴充屬性, 就可以簡單的做出動畫效果 addlass() 方法格式 $( 選擇器 ).addlass(class_name) 功能對 $( 選擇器 ) 元素附加 SS 的 class 屬性, 若要附加多個類別, 可以空白區隔します參數 class_name: 附加至 HTML 的 class 屬性名稱 removelass() 方法格式 $( 選擇器 ).removelass(class_name) 功能對 $( 選擇器 ) 元素移除 SS 的 class 屬性, 若要移除多個類別, 可以空白區隔します參數 class_name: 從 HTML 移除的 class 屬性名稱當目標元素已經有設定 class 屬性時, 則會維持原類別並附加新的類別上去範例 1 的說明改變按鈕背景顏色本章節將介紹滑鼠移入觸發動畫的 4 個範例, 首先是改變背景顏色 HTML HTML 中配置一個設定 cssanim 類別名稱的按鈕 <a href="#" class="cssanim">button</a> sample1.html SS SS 中定義滑鼠未重疊按鈕時的狀態以及動畫變化後之樣式, 分別設定於不同選擇器中, 範例最終將改變 color 屬性以及 background-color 屬性的值

3 .cssanim { padding: 15px 0; width: 150px; color: #000; font-weight: bold; text-align: center; background-color: #cfcfcf; border: #999 1px solid; transition: all 0.3s linear; 初始狀態的按鈕樣式 css/style1.css.bgolor { color: #fff; background-color: #000; 動畫後的按鈕樣式初始狀態的按鈕樣式中設定 transition 屬性, 目標元素設定為 all, 動畫時間請設定隨意的秒數當滑鼠移入有 cssanim 類別名稱的元素時, 使用 addlass() 與 removelass() 附加 / 移除 bgolor 類別以控制動畫 $('.cssanim').hover(function(){ $(this).addlass('bgolor');, function(){ $(this).removelass('bgolor'); ); ❶ ❷ js/script1.js 滑鼠移入 / 滑鼠移出時的事件處理使用 hover() 方法 ( P.15) 1 滑鼠移入時用 addlass() 方法附加 bgolor 類別, 讓按鈕因動畫效果而改變滑鼠移出處理的 2 中, 用 removelass() 方法移除 bgolor 類別, 讓改變的 color 屬性值及 background-color 屬性值回到 cssanim 類別選擇器原本設定的值

4 範例 2 的說明圓角變化させる接下來的範例當滑鼠移入時, 以動畫效果將按鈕的四個角變化成圓角, HTML(sample2.html) 的部分與範例 1 相同 SS SS 的內容也大致與範例 1 相同, 但改為使用 border-radius 屬性讓其變為圓角 css/style2.css.cssanim { padding: 15px 0; width: 150px; color: #000; font-weight: bold; text-align: center; 初始狀態的按鈕樣式 background-color: #cfcfcf; border: #999 1px solid; transition: all 0.3s linear;.bdrradius { border-radius: 15px; 動畫後的按鈕樣式的部分除附加 / 移除的類別名稱不同外, 其他皆相同 $('.cssanim').hover(function(){ $(this).addlass('bdrradius');, function(){ $(this).removelass('bdrradius'); ); js/script2.js 範例 3 的說明旋轉按鈕接著當滑鼠移入時將按鈕以垂直方向水平方向旋轉 HTML 準備兩個按鈕分別執行垂直方向 / 水平方向旋轉

5 <a href="#" class="cssanim1">button1</a> <a href="#" class="cssanim2">button2</a> sample3.html SS SS 中除按鈕初始狀態的樣式外, 還要設定垂直旋轉動畫的類別選擇器 rotatex, 及水平旋轉動畫的 rotatey.cssanim1,.cssanim2 { margin: 0 10px; padding: 15px 0; width: 150px; color: #000; font-weight: bold; text-align: center; background-color: #cfcfcf; border: #999 1px solid; transition: all 1s ease-in-out; 初始狀態的按鈕樣式 css/style3.css.rotatex { transform: rotatex(360deg);.rotatey { transform: rotatey(360deg); 垂直旋轉動畫水平旋轉動畫旋轉動畫利用 SS3 的 transform 屬性控制 rotatex 函式與 rotatey 實作, 範例中設定旋轉角度為 360deg, 表示將按鈕旋轉一圈, 以數字控制旋轉的角度範例中雖然多了一個按鈕, 但基本上都差不多 $('.cssanim1').hover(function(){ $(this).addlass('rotatex');, function(){ $(this).removelass('rotatex'); ); ❶ ❷ js/script3.js $('.cssanim2').hover(function(){

6 $(this).addlass('rotatey'); ❶, function(){ $(this).removelass('rotatey'); ❷ ); 當滑鼠游標分別移入 jquery 物件.cssAnim1.cssAnim2 時, 在 1 附加旋轉動畫的類別, 以實作旋轉設定角度的動畫滑鼠移出時, 在 2 會再次執行旋轉動畫, 接著移除 1 附加的類別範例 4 的說明放大效果する HTML HTML 中配置要使用的按鈕 <a href="#" class="cssanim"> </a> <img src="img/sample.jpg" alt=""> sample4.html SS SS 中撰寫初始樣式按鈕圖片樣式以及放大動畫的樣式.cssAnim { width: 200px; height: 200px; background-color: #ccc; border: #333 2px solid; position: relative; 按鈕樣式 css/style4.css.cssanim img { top: 0; left: 0; width: 100%; position: absolute; transition: all 0.3s linear; 按鈕中圖片樣式

7 .imgscale img { transform: scale(1.5); 放大動畫按鈕圖片的樣式 cssanim img 中, position 屬性設定 absolute, 讓圖片置中顯示動畫用的選擇器 imgscale img 中, transform 屬性以 scale 函式設定, 並傳入參數 15, 表示圖片放大 1.5 倍, 修改 scale 函式的參數可改變放大率的內容與先前的範例相同, 利用 addlass() / removelass() 方法控制動畫的類別, 動畫類別 imgscale 的附加目標為按鈕 (cssanim) 而非圖片 $('.cssanim').hover(function(){ $(this).addlass('imgscale');, function(){ $(this).removelass('imgscale'); ); js/script4.js MEMO jquery 中 SS 屬性的設定方法若要在 jquery 的方法中撰寫 SS 屬性, 可如下面範例使用單引號 ( 或雙引號 ) 分別包住屬性名稱與值 $( ).css({'font-color':'#000', し 'background-color':'#fff'); 但本書中採用如下格式並以駝峰式表示屬性名稱 $( し ).css({fontolor:'#000', backgroundolor:'#fff');

5-1 nav css 5-2

5 HTML CSS HTML CSS Ê Ê Ê Ê 5-1 nav css 5-2 5-1 5 5-1-1 5-01 css images 01 index.html 02 5-3 style.css css 03 CH5/5-01/images 04 images index.html style.css 05

技術筆記 01 addlass()/removelass() 方法對指定的 HTML 元素附加 class 屬性可用 addlass() 方法, 刪除 class 屬性則用 removelass() 方法 透過附加 / 刪除設定 SS 的類別, 就可改變該元素的樣式 其與 animate() 方法不

技術筆記 01 addlass()/removelass() 方法對指定的 HTML 元素附加 class 屬性可用 addlass() 方法, 刪除 class 屬性則用 removelass() 方法透過附加 / 刪除設定 SS 的類別, 就可改變該元素的樣式其與 animate() 方法不