Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

[作業07] HTML/CSS/jQuery 物件小動畫、燈箱效果

1. HTML/CSS/jQuery 物件小動畫、燈箱效果作業說明


請參考

http://mepopedia.com/forum/read.php?804,81401

上課範例
http://mepopedia.com/~css104-2c/hw08/ex/hw08-1025445070



1.參考上課與講義上之作法,以jQuery做出物件小動畫、燈箱效果(有效果即可),可延續作業六之主題。
2.也可以期末主題製作物件小動畫、燈箱效果

3.將資料夾命名為 hw0-7學號,以FTP上傳至hw08資料夾
作業網址為http://mepopedia.com/~css105-2b/hw07/hw07-1045445XXX

並請回覆:

(1)作業網址:http://mepopedia.com/~css105-2b/hw07/hw07-1045445XXX
(2)製作心得:
學號



請於規定時間準時繳交作業。



2. 學長姊範例


http://mepopedia.com/~css104-2c/hw08/ex/hw08-1025445070/
http://mepopedia.com/~css104-2c/hw08/ex/final-1015445215
http://mepopedia.com/~css104-2c/hw08/ex/final-1015445218
http://mepopedia.com/~css104-2c/hw08/ex/final-1025445044
http://mepopedia.com/~css104-2c/hw08/ex/final-1025445055
http://mepopedia.com/~css104-2c/hw08/ex/final-1025445205
http://mepopedia.com/~css104-2a/hw08/hw08-1035445073/
http://mepopedia.com/~css104-2b/hw08/hw08-1035445209/
http://mepopedia.com/~css104-2b/hw08/hw08-1035445218/
http://mepopedia.com/~css104-2b/hw08/hw08-1035445191/
http://mepopedia.com/~css104-2c/hw08/ex/0519BPL




3. 2015/5/28上課影音


HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0


(1)作業網址:http://mepopedia.com/~css105-2b/hw07/hw07-1045445089
(2)製作心得:網頁真多變化hot smiley
學號:1045445089

(1)作業網址:http://mepopedia.com/~css105-2b/hw07/hw07-1045445017

螢幕較小的版本:http://mepopedia.com/~css105-2b/hw07/hw07-1045445017/hw07-1045445017-2

(2)製作心得:重新思考了網頁的主題,想說怎麼排版、配色比較好看,且設計感也很重要,所以首頁
的圖片有重組去背,其他圖片也有加文字和修改,而最後加上小動畫還有燈箱效果後,讓網頁有更多
變化,也學到了新的網頁技巧,還滿好的。

學號:1045445017



Edited 1 time(s). Last edit at 05/16/2017 01:09AM by lemon2016.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~css105-2b/hw07/hw07-1045445035
(2)製作心得: 蠻順手的,比之前的簡單
學號 1045445035

(1)作業網址:http://mepopedia.com/~css105-2b/hw07/hw07-1045445014


(2)製作心得:做還滿久的時間,因為有些語法好像,做到後面還真的會有點混亂哈哈
不過最後還是很順利地做出來了 spinning smiley sticking its tongue out


學號:1045445014

(1)作業網址:http://mepopedia.com/~css105-2b/hw07/hw07-1045445095


(2)製作心得:找圖想主題真的蠻費時的,而在放圖跟加文字一直看到重覆的語法印象會加深。

學號:1045445095

(1)作業網址:http://mepopedia.com/~css105-2b/hw07/hw07-1045445062

(2)製作心得:調整真的會需要很久時間去摸,希望圖不會位移eye rolling smiley

學號:1045445062

(1)作業網址:http://mepopedia.com/~css105-2b/hw07/hw07-1045445198
(2)製作心得:雖然不難但很累很麻煩

(1)作業網址:http://mepopedia.com/~css105-2b/hw07/hw07-1045445002
(2)製作心得: 覺得又學到了有趣的東西,雖然挺難搞
學號 1045445002

(1)作業網址:http://mepopedia.com/~css105-2b/hw07/hw07-1045445161

(2)製作心得:
我想看玩具總動員 4 啦 ! ! !
一樣也是對位比較複雜,但經過摸索有比較清楚了smileys with beer
去背去的手指僵硬spinning smiley sticking its tongue out

學號 : 1045445161



Edited 1 time(s). Last edit at 05/17/2017 01:38PM by 1045445161.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~css105-2b/hw07/hw07-1045445092

(2)製作心得: 很多小細節要花不少時間去修改,按鈕的小icon旁的member的距離已經調到1了icon還是會蓋到M字
覺得比較難的部分就是動圖和跳窗,一開始跳窗的圖和字都用好了,但只有第一個腳色的跳窗是正常的,
其他三個的跳窗不但點了沒跳出來,反而跟第一個跳窗重疊了,之後把語法重新複製上去,重貼文字和圖片後
就沒有再出現那個問題了。那部分的語法真叫人看得頭昏眼花eye popping smiley
但是做完後真的覺得多了不少趣味性。

學號:1045445092

1)作業網址:http://mepopedia.com/~css105-2b/hw07/hw07-1045445008


(2)製作心得:找圖真的花滿多時間的,這次又認識了很多語法!做出來很開心!

學號:1045445008

1)作業網址:http://mepopedia.com/~css105-2b/hw07/hw07-1045445074


(2)製作心得: 有一頁是跳動的圖片那頁我自己很喜歡,覺得人變小小的好有趣,
有遇到一些問題,都有請教朋友,也順利解決了,
期待能做出更滿意的網頁。

學號:1045445074

1)作業網址:http://mepopedia.com/~css105-2b/hw07/hw07-1045445080

(2)製作心得:再調導覽列的位置有花比較久的時間,現在網頁越來越生動也越來越有成就感。

學號:1045445080

1)作業網址:http://mepopedia.com/~css105-2b/hw07/hw07-1045445149

(2)製作心得:我做了3個多小時,我覺得好難..要多加油了!!!

(1)作業網址:http://mepopedia.com/~css105-2b/hw07/hw07-1045445146
(2)製作心得:花了一整個下午的時間,但是成果我很滿意
學號:1045445146

(1)作業網址:http://mepopedia.com/~css105-2b/hw07/hw07-1045445188

(2)製作心得:做了很久,一直在摸索第四頁要怎麼新增新的跳動物件,幸好最後還是成功把它做出來了,
做完之後覺得很有成就感,因為是做自己喜歡的東西,所以製作過程很愉快,可是最後一頁的head還是一直都跑不出來,希望老師求解!

學號:1045445188



Edited 1 time(s). Last edit at 05/24/2017 10:21PM by 1045445188.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~css105-2b/hw07/hw07-1045445182
(2)製作心得:真是挺複雜阿.....
學號:1045445182

(1)作業網址:http://mepopedia.com/~css105-2b/hw07/hw07-1045445125
(2)製作心得:新的版面很有趣~做起來超漂亮的: 感動啊~~~~)-D

(1)作業網址:http://mepopedia.com/~css105-2b/hw07/hw07-1045445131
(2)製作心得:很有趣 但也很麻煩~~

(1)作業網址:http://mepopedia.com/~css105-2b/hw07/hw07-1045445077


(2)製作心得:看得眼花撩亂,但還是勉強做出來了XD因為是做自己喜歡的日本樂團,所以還蠻開心的

學號:1045445077

(1)作業網址:http://mepopedia.com/~css105-2b/hw07/hw07-1045445053
(2)製作心得:不錯玩~~~人物上下動XD
學號:1045445053

(1)作業網址:http://mepopedia.com/~css105-2b/hw07/hw07-1045445119

(2)製作心得:很努力地抓時間狂做,雖然也有找不到東西在哪,可是問老師之後就會了YA~

學號:1045445119

(1)作業網址:http://mepopedia.com/~css105-2b/hw07/hw07-1045445044
(2)製作心得:其實網頁真的很酷,但是常常被程式碼搞昏哈哈

(1)作業網址:http://mepopedia.com/~css105-2b/hw07/hw07-1045445110

(2)製作心得:在裡面摸索,也搞懂了一些語法,覺得做出會動的網頁很有成就感~~

(1)作業網址:http://mepopedia.com/~css105-2b/hw07/hw07-1045445071
(2)製作心得:有點小複雜
學號:1045445071

(1)作業網址:http://mepopedia.com/~css105-2b/hw07/hw07-1045445152
(2)製作心得:網頁有更多變化了 覺得頭腦有些搞混 不過最後都弄清楚了 覺得學到蠻多的

(1)作業網址:http://mepopedia.com/~css105-2b/hw07/hw07-1045448015
(2)製作心得: 製作上雖然在修改上遇到了一些問題,但問過同學後了解到問題點,就又學到新的東西smiling smiley
學號:1045448015



Edited 1 time(s). Last edit at 06/08/2017 10:09AM by 1045448015.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~css105-2b/hw07/hw07-1035461139

(2)製作心得:人物角色可以跳動還蠻有趣的,但是角色的音符那裡有個"<"這個符號,不知道問題在哪

學號 1035461139



Edited 1 time(s). Last edit at 06/10/2017 03:05PM by 鄭文茹.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~css105-2b/hw07/hw07-1045445026
(2)製作心得:我的心好累 不知道調到什麼 上面的標籤背景變成只有一半eye rolling smiley

(1)作業網址:http://mepopedia.com/~css105-2b/hw07/hw07-1045445086

(2)製作心得:搞那幾個動來動去得快瘋了

(1)作業網址:http://mepopedia.com/~css105-2b/hw07/hw07-1045445056


(2)製作心得:蠻複雜的,做了很久,但做完很有成就感。

學號:1045445056

(1)作業網址:http://mepopedia.com/~css105-2b/hw07/hw07-1045445059
(2)製作心得:網頁真有趣
學號:1045445059

(1)作業網址:http://mepopedia.com/~css105-2b/hw07/hw07-1045445155
(2)製作心得:FUN><
學號:104544155

(1)作業網址:http://mepopedia.com/~css105-2b/hw07/hw07-1045445065
(2)製作心得:好玩
學號 1045445065

(1)作業網址:http://mepopedia.com/~css105-2b/hw07/hw07-1045445173
(2)製作心得: 燈箱弄了比較久不過還可以
學號 1045445173

(1)作業網址:http://mepopedia.com/~css105-2b/hw07/hw07-1045445068


(2)製作心得:做了非常非常非常的久,不過大部分都在修改。

學號:1045445068

(1)作業網址:http://mepopedia.com/~css105-2b/hw07/hw07-1045445104
(2)製作心得:網頁真多變化 覺得新鮮
學號:1045445104

(1)作業網址:http://mepopedia.com/~css105-2b/hw07/hw07-1045445107
(2)製作心得:網頁真的是 需要很多的耐心 雖然做的不是很出色...
學號:1045445107

(1)作業網址:http://mepopedia.com/~css105-2b/hw07/hw07-1045445050/
(2)製作心得:這個很好玩,但是也要花很多耐心在上面,雖然沒有做得很好 ,希望可以拿高分
學號:1045445050

(1)作業網址:http://mepopedia.com/~css105-2b/hw07/hw07-1045445113
(2)製作心得:真的越來越複雜啦 真的盡力了><
學號:1045445113

按到



Edited 1 time(s). Last edit at 06/21/2017 03:37AM by 1045445085.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~css105-2b/hw07/hw07-1045445122

(2)製作心得:本來快做好了,結果突然當掉html全部都不見又重做了一次...

學號 : 1045445161