Buying for a Team? Gift This Course
Wishlisted Wishlist

Please confirm that you want to add 使用 jQuery 打造互動性網頁動畫效果 to your Wishlist.

Add to Wishlist

使用 jQuery 打造互動性網頁動畫效果

儘管你/妳沒有 JavaScript 基礎也適合上這門課,為網頁添加具互動性的網頁動畫效果!
4.7 (134 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
629 students enrolled
Last updated 2/2017
Traditional Chinese
$45
30-Day Money-Back Guarantee
Includes:
  • 7 hours on-demand video
  • 12 Articles
  • 32 Supplemental Resources
  • 1 Coding exercise
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?
Description

你/妳好,我們是六角學院!

如果你沒有 JavaScript 基礎,但又想要快點為網頁上添增動畫效果,
那麼 jQuery 是你的最佳選擇!

我們在課堂期間提供的服務有:

  1. 無限期、無限次數地觀看線上教學影片
  2. 隨時可提問的 udemy 發問社群
  3. 每週三晚上七點半都會舉辦線上問答會,讓學生們提問網頁技術上的問題
  4. 提供二次檢視網頁程式碼

若想看我們提供的其他服務與課程,
歡迎 Google 關鍵字搜尋「六角學院」搜尋我們的粉絲頁,
瀏覽更多有關於我們的訊息!

Who is the target audience?
  • 想要了解 WEB UI 究竟該如何設計網頁動畫效果的學生
  • 想要設計出超棒的網頁使用者體驗的學生
  • 不適合完全不懂 HTML、CSS 的學生
Students Who Viewed This Course Also Viewed
What Will I Learn?
能夠掌握如何在網頁上設計互動性網頁動畫效果
有辦法輕易整合別人寫好的第三方動畫插件,並套用在自己的網頁上
有能力評估別人的網站究竟是用了哪些插件來設計網頁動畫效果
當 jQuery 程式碼變多時,也能夠有條理地進行維護整理
View Curriculum
Requirements
  • 本課程使用 Sublime Text 3 網頁編輯器進行教學
Curriculum For This Course
Expand All 66 Lectures Collapse All 66 Lectures 06:49:10
+
jQuery 入門
9 Lectures 45:25

六角學院線上問答會資訊
00:04

初探 jQuery 強大之處(練習流程)
00:01


下載jQuery檔案,介紹1.x與2.x的差別
06:21

設定 jQuery 環境好簡單
11:35

jQuery 環境建置範例程式碼
00:02

小叮嚀(win熱鍵提醒):使用 Sublime 插件提升寫 jQuery 效率
00:04


第一章測驗
2 questions
+
選擇器與事件:開始讓你的網頁具有互動性吧!
7 Lectures 30:55
選擇器:設定 CSS 般指定要操控的網頁元素
06:23

選擇器範例程式碼
00:02

輕鬆撰寫第一個網頁設計互動效果
07:56

點擊事件範例程式碼
00:02

使用 toggle 切換開啟或隱藏效果
04:53

教你如何除錯 jQuery
08:02


第二章測驗
3 questions
+
看看還有哪些動畫效果可以使用
6 Lectures 42:38
使用 Fade 設計淡入淡出效果
05:29

使用 Slide 設計滑動效果
09:57

都不喜歡?那使用 toggleClass、搭配 CSS3 Transition 自訂 CSS 效果吧!
08:41

設定 CSS 動畫小密技:overflow、CSS3 transition
08:46

jquery 鏈式寫法
04:45


第三章測驗
3 questions
+
教你如何搭配 CSS + jQuery 各式各樣的動畫效果
10 Lectures 01:04:09

preventDefault 程式碼範例
00:02

css() - 教你如何動態載入 CSS style 設定
04:05

設計下拉式收闔選單
11:00


即時放大縮小字型好簡單
06:47

fixed 固定網頁內容
06:01

使用 stop() 讓你的動畫效果更滑順
04:45

設定offcanvas左右選單切換
08:31

Animate.css - 載入第三方插件 - 增添網頁動畫豐富度
07:23

第四章測驗
2 questions
+
教你如何操控網頁元素
10 Lectures 57:41
this - 教你如何操作本身元素
05:33


siblings() - 同層元素
08:01

find () - 輕鬆找到子元素內容
04:00

設計 QA折疊選單
10:10

二階層式折疊選單設計
06:34

使用 html()、text() 載入內容
04:48

click()、on() 的差別
07:18

click與on的範例程式碼
00:05

總結回顧
03:30

第五章測驗
3 questions
+
jQuery 常用小技巧
4 Lectures 32:56
attr() - 動態增加 HTML 標籤屬性
09:04

remove() - 移除網頁標籤小工具
08:44

top 滑動效果
04:57


第六章測驗
1 question
+
第三方Pugin
9 Lectures 01:21:17
使用第三方plugin需要注意的細節
06:33

Lightbox 2 - 圖片燈箱效果 (上)
16:05

Lightbox 2 - 圖片燈箱效果 (下)
09:53

Nivo Slider - 圖片輪播效果 (上)
06:48

Nivo Slider - 圖片輪播效果 (下)
17:31

將上面的效果試著整合在一個網頁中吧!
05:08

Peity - 無痛設計網頁圖表資訊
07:06


+
jQuery UI
5 Lectures 41:27
jQuery UI 教學事前須知
00:04

jQuery UI 簡介
08:28

datepicker - 設計日曆效果 (上)
16:48

datepicker - 設計日曆效果 (下)
06:41

+
開始喜歡 jQuery了嗎?教你如何更精進!
4 Lectures 10:55

各種國內外 jQuery教學資源、線上試題
04:04

最終作業講解
03:24

作業細節
00:02
+
最後,你還可以往哪些方向去精進
2 Lectures 00:03
網頁關鍵字速記表
00:01

如何從網路上找到適合自己的學習教材
00:01

變數練習
1 question
About the Instructor
4.6 Average rating
1,671 Reviews
8,127 Students
8 Courses
前端工程師

你好,我是六角學院的校長,洧杰,

我是熱愛分享與交流的前端工程師,目前專注於兼容 Desktop / Mobile 網頁前端開發,期間已協助數百位平面設計師、網頁設計師導入標準網頁設計。

同時我也是高雄前端社群創辦人,於2013年3月31日創立社群,每月固定舉辦前端主題聚會,至今已舉辦超過30場聚會,不重複參與人數破千位,2015年協助14位平面設計師、網頁工程師轉職為前端工程師。同時也是國立高雄大學資管前端兼任講師、業界講師。

4.6 Average rating
1,671 Reviews
8,127 Students
8 Courses
前端設計師、前端工程師

大家好,我是王志誠 (Casper),是由設計師轉為前端工程師,專長是視覺設計與前端整合、前端技術教育訓練、前端自動化,常用的工具、技術有 Sketch、Sass、Angular.js、Node.js、Gulp 等主流前端技術。

目前是高雄前端社群的核心成員,高雄前端社群除了會有中型的交流會、Workshop以外,我還會舉辦 CSS 讀書會(每月1~2次),如果對 前端、CSS 有興趣,歡迎追蹤 FB / 高雄前端社群,將可以看到我們的活動。

4.6 Average rating
1,671 Reviews
8,127 Students
8 Courses

一次付費,終身複習 
隨著時代更新的線上數位教材
透過國際知名 Udemy 線上教育平台 
我們致力於優化程式教育的流程

4.7 Average rating
591 Reviews
1,131 Students
4 Courses
前端實習生
Report Abuse