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

Advanced

Re: [作業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

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

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

並請回覆:

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

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

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


[hr]

3. 2015/5/28上課影音


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


(1)作業網址:http://mepopedia.com/~css105-2c/hw07/hw07-1045445189
(2)製作心得: 我覺得定位點滿難算的,而且這次要認識的新東西太多了做的時候會卡關eye popping smiley
有點難應用,有些想讓它有動態效果而已卻不知道怎麼用…
還有使用跳窗出來想讓文字繞圖排文,可是套用語法之後就不見了,
連之後的頁面也不見sad smiley 我只能再重新做了。最後是用學校網頁瀏覽「關於綠藤」那頁,
文字是剛剛好的,在家卻會掉到下一頁,天哪!老師請解答confused smiley

老師加分: http://mepopedia.com/~css105-2c/hw07/hw07-10454451890

(1)作業網址:file:///C:/Users/user/Desktop/hw07-1045445120/index.html
(2)製作心得:多了動畫變得更看不懂了嗚嗚,做到後面有點不知道自己在做啥,東西一直跑掉。

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

(2)製作心得:本次的製作過程中,原先想於其它頁面做燈箱效果,燈箱隱藏後,但是打不開來,
嘗試了幾次後,頁面因修改的緣故,整個變形XD,之後就單純以相片製作效果,另外一個問題
是某些圖片已更新過,但頁面無法顯示,有檢查個幾次,照片名稱是否有誤,一上傳後,原本沒
問題的照片有幾張也無法顯示,不知是否為檔案格式,整體還需要調整,整個製作過程蠻好玩的
版面文字不多,多以圖片製作色彩轉換,呼應整體版面質感,無法顯示照片的問題就當面請問老
師了XDDD(自猜是檔案格式@@~



Edited 2 time(s). Last edit at 05/10/2017 09:02AM by 松本.豪.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~css105-2c/hw07/hw07-1045445045
(2)製作心得: 新效果要花一些時間研究,燈箱的標題跟顏色不知道為什麼一直沒有辦法調,反而是一直調到下面的字

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


(2)製作心得:蠻有難度的! 不過做起來蠻有趣的~~ 謝謝老師!



Edited 2 time(s). Last edit at 05/17/2017 11:28AM by 廖芳如.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~css105-2c/hw07/hw07-1045445105
(2)製作心得: 這次的製作時間比較長但也因此學到了很多新的東西!
完成後特別有成就感!
謝謝老師細心的指導!

(1)作業網址:http://mepopedia.com/~css105-2c/hw07/hw07-1045445144
(2)製作心得: 這個作業的製作時間比較長覺得難阿~~但也因此學到了很多新的東西,自己做物件小動畫蠻有趣的!!

(1)作業網址:http://mepopedia.com/~css105-2c/hw07/hw07-1045445212
(2)製作心得:覺得好難用 很複雜

(1)作業網址:http://mepopedia.com/~css105-2c/hw07/hw07-1045445042
(2)製作心得:好難...............差點砸電腦.....

(1)作業網址:http://mepopedia.com/~css105-2c/hw07/hw07-1045445015
(2)製作心得:一開始會覺得有點小複雜~~~但慢慢的一個個找到方法 就開始上手!!!
也加入一些自己喜歡的元素在網頁裡,做完之 後會覺得很有成就感~~~~~~smiling smiley)))

(1)作業網址:http://mepopedia.com/~css105-2c/hw07/hw07-1045445036
(2)製作心得: 比想像中的快弄好,動來動去那頁是故意讓熊熊們重疊,看起來比較可愛哈哈~
但定位真的有難度的啊~~我的天~~eye popping smiley

(1)作業網址:http://mepopedia.com/~css105-2c/hw07/hw07-1045445141
(2)製作心得: 老樣子你懂得smoking smiley

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

(2)製作心得:多災多難~總之順利解決了



Edited 1 time(s). Last edit at 05/25/2017 12:09PM by Hus,Ching-Chiech.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~css105-2c/hw07/hw07-1045445069
(2)製作心得:還蠻麻煩的!搞了很久才弄懂,才可以讓它上下動還有可以漂亮的打開小窗~



Edited 1 time(s). Last edit at 05/24/2017 09:06PM by 1045445069.
(編輯記錄)

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

(2)製作心得: 這次的跳跳動畫理解了很久,因為有自己加了很多東西進去,發現是自己沒注意到的細節,耐心看了一次影片才發現原來這麼簡單!!定位要慢慢橋到自己理想的位置也花了不錯多的時間.......但是能做出來非常有成就感!!
燈箱設定倒是咻咻咻的弄完了d(`・∀・)b

學號─1045445162

(1)作業網址:http://mepopedia.com/~css105-2c/hw07/hw07-1045445198
(2)製作心得: 很累

(1)作業網址:http://mepopedia.com/~css105-2c/hw07/hw07-1045445195
(2)製作心得: 燈箱效果一直做不好,後來好不容易做出來結果整個網頁很奇怪。

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


(2)製作心得:還蠻困難的,燈箱效果花了很多時間在用,好在都順利解決了

(1)作業網址:http://mepopedia.com/~css105-2c/hw07/hw07-1045445027
(2)製作心得:3個半小時不是開玩笑的...但做完又好開心啊啊啊 ˊ 口 ˋ

(1)作業網址:http://mepopedia.com/~css105-2c/hw07/hw07-1045445003
(2)製作心得:
超級作死的在hw06時很混的做完,於是hw07就要大改版面及內容,覺得加倍的難
目前還是半成品,我會努力研究做完的(ง •̀_•́)ง

6/15更新
已完成 hot smiley hot smiley hot smiley

(1)作業網址:http://mepopedia.com/~css105-2c/hw07/hw07-1045445138
(2)製作心得: 遇到一些問題但都解決了

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

(2)製作心得:
學習新的東西,東西很多有點複雜,有些地方還需要加強,但是比預期的好太多了

希望繼續加油....

(1)作業網址:http://mepopedia.com/~css105-2c/hw07/hw07-1025445061
(2)製作心得: 很難

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


(2)製作心得:這次的製作時間比較長,燈箱效果一直重新用了好幾次,不過滿有趣的

(1)作業網址:http://mepopedia.com/~css105-2c/hw07/hw07-1045445030
(2)製作心得: 花了挺久的時間做好,覺得還蠻喜歡她在動的樣子,希望可以再多學習

1)作業網址:http://mepopedia.com/~css105-2c/hw07/hw07-1045445051/
(2)製作心得: 每次都更加熟悉網頁設計了,非常高興。

(1)作業網址:http://mepopedia.com/~css105-2c/hw07/hw07-1045445057
(2)製作心得:選了主題才發現圖片不好找,難過了 不過看到網頁動起來都很高興

(1)作業網址:http://mepopedia.com/~css105-2c/hw07/hw07-1045445186
(2)製作心得: 製作時間拉很長 語法部分也花了一點時間看清楚跟實作

(1)作業網址:http://mepopedia.com/~css105-2c/hw07/hw07-1045445072
(2)製作心得: 好多小細節要注意,有點難搞。標題的logo地方一直調不好,只好就空一截啦~~~~~~~~~~hot smiley

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

(2)製作心得: 不知道哪裡出了什麼問題 他就是不給我動阿!!!!!!

(1)作業網址:http://mepopedia.com/~css105-2c/hw07/hw07-1045445147
(2)製作心得:這次的作業做起來相當舒服又愉快。

(1)作業網址:http://mepopedia.com/~css105-2c/hw07/hw07-1045445177
(2)製作心得:這次的作業做起來不算難

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

(2)製作心得:這次燈箱的地方最有問題,為什麼他的間隔距離這麼怪呢?

(1)作業網址:http://mepopedia.com/~css105-2c/hw07/hw07-1045445180
(2)製作心得: 有困難 用很久 學校電腦跟自己電腦會跑掉

(1)作業網址:http://mepopedia.com/~css105-2c/hw07/hw07-1015445216
(2)製作心得: 燈箱內的東西有點難調整,全部擠在一起。

http://mepopedia.com/~css105-2c/hw07/hw07-1045445108



Edited 3 time(s). Last edit at 06/15/2017 12:27AM by 千萬別看.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~css105-2c/hw07/hw07-1045445102
(2)製作心得: 要花一些時間研究

(1)作業網址:http://mepopedia.com/~css105-2c/hw07/hw07-1045445217/
(2)製作心得: 好難啊 快瘋了

(1)作業網址:http://mepopedia.com/~css105-2c/hw07/hw07-1045445075
(2)製作心得: 這個效果感覺讓網頁更高級了 但有些複雜

(1)作業網址:http://mepopedia.com/~css105-2c/hw07/hw07-1045445201
(2)製作心得:跟作業六差不多 簡單

(1)作業網址:http://mepopedia.com/~css105-2c/hw07/hw07--1045445084/index.html
(2)製作心得: 很難

(1)作業網址:http://mepopedia.com/~css105-2c/hw07/hw07-1045445153
(2)製作心得:有點小複雜了

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

(2)製作心得:這次做得感覺滿快的,已經越來越熟悉語法了

(1)作業網址:http://mepopedia.com/~css105-2c/hw07/hw07-1045445174
(2)製作心得: 有點難



Edited 3 time(s). Last edit at 06/15/2017 04:45PM by 1045445174.
(編輯記錄)

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

(2)製作心得:這次的製作過程中,我發現有太多讓我差點打爆電腦的衝動,第一次做的時候圖檔全部不見,還有一堆令人驚恐的事,幸好第二次做的時候非常成功,也還好我沒有打爆電腦,因為我不是用我的電腦做的~~

(1)作業網址:http://mepopedia.com/~css105-2c/hw07/hw07-1045445177
(2)製作心得: 其實上學期學得讓我覺得好像很夠用(但其實我知道不夠用 導致新的東西難以吸收進去

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

(2)製作心得:本次的製作過程中,燈箱搞得我有點不太理解 最後還是花點時間把它做完

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


(2)製作心得:很有挑戰性!不過學到新東西~