[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果 1. step5: 地標設定2. 學長姊範例3. 2015/5/28上課影音1. step5: 地標設定 上課範例 http://mepopedia.com/~css104-2c/hw08/ex/hw08-1025445070 2. 學長姊範例 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-2c/hw08/ex/0519BPL 重點： CSS絕對定位：position: absolute; CSS定位座標：top, bottom, left, right 定位分為：絕對定位position: absolute; 與相對定位 position: relative; 本範例使用的是絕對定位 [img]http://i.imgur.com/kPNRsjk.jpg[/img] 1.於Menber #section3 加入物件跳動元素 2NE1 About Member Concerts Song 2NE1（韓語：투애니원），為韓國YG娛樂旗下的四人女子團體，成員包括Bom、Dara、CL及Minzy。 2009年3月27日和同門師兄BIGBANG在LG CYON Lollipop手機的廣告單曲《Lollipop》中合作，首度公開亮相；其後同年5月17日以單曲《Fire》正式出道。 2NE1官方粉絲名稱為「Black Jack」，取於撲克牌遊戲中的「Black Jack」，意即21點，為該遊戲中最大的組合，象徵2NE1也是音樂圈的王者；官方應援色為熱粉紅色，官方手燈為白色天使燈(韓版)和桃紅色天使燈(日版)。 李彩麟（Lee Chae-Lin，英語：Faith Lee，1991年2月26日－），藝名CL（韓語：씨엘），韓國女歌手、饒舌歌手、舞者。 2006年在韓國的首爾特別市被經紀公司YG Entertainment發掘，進入YG Entertainment經紀公司當練習生，2009年加入由經紀公司YG Entertainment組成的女子流行音樂團體2NE1，為2NE1的隊長。 朴春（英語：Jenny Park，박봄／朴봄 Park Bom，1984年3月24日－），藝名Bom（봄／春），韓國女歌手、舞者。 2005年在韓國的首爾特別市被經紀公司YG Entertainment發掘，進入該經紀公司當練習生，2009年加入由經紀公司YG Entertainment組成的女子流行音樂團體2NE1，為2NE1四位成員之一。 Dara（英語：Sandara Park，韓語：다라，本名：박산다라，漢字：朴산다라，1984年11月12日－），韓國女歌手、演員、舞者、電視節目主持人。 2007年8月1日從菲律賓回到韓國，隔日跟YG Entertainment簽約，正式進入YG Entertainment經紀公司底下當練習生，2009年加入由經紀公司YG Entertainment組成的女子流行音樂團體2NE1，為2NE1四位成員之一。 Minzy（英語：Gong Min-ji，韓語：민지，本名：공민지，漢字：孔旻智，1994年1月18日－），韓國女歌手、舞者。 2006年在韓國的首爾特別市被經紀公司YG Entertainment發掘，進入YG Entertainment經紀公司當練習生，2009年加入由經紀公司YG Entertainment組成的女子流行音樂團體2NE1，為2NE1四位成員之一。 $(document).ready(function() { $('#menu a').click(function () { $('#wrapper').scrollTo($(this).attr('href'), 1000); return false; }); }); setInterval(function(){ $("#point1").animate({top:"-=15px"},1000).animate({top:"+=15px"}, 1000); }, 2000); setInterval(function(){ $("#point2").animate({top:"+=15px"},1000).animate({top:"-=15px"}, 1000); }, 2000); setInterval(function(){ $("#point3").animate({top:"-=15px"},1000).animate({top:"+=15px"}, 1000); }, 2000); setInterval(function(){ $("#point4").animate({top:"+=15px"},1000).animate({top:"-=15px"}, 1000); }, 2000); // 隱藏燈箱 $('.display_panel').hide(); // 打開燈箱 (fadeIn) $('#point1').click(function (){ $('#s1panel_1').fadeIn(500); return false; }); // 關閉燈箱 $('.x_btn').click(function (){ $('.display_panel').hide(); return false; }); // 打開燈箱 (fadeIn) $('#point2').click(function (){ $('#s1panel_2').fadeIn(500); return false; }); // 打開燈箱 (fadeIn) $('#point3').click(function (){ $('#s1panel_3').fadeIn(500); return false; }); // 打開燈箱 (fadeIn) $('#point4').click(function (){ $('#s1panel_4').fadeIn(500); return false; }); [hr] CSS @charset "UTF-8"; /* CSS Document */ body { width: 100%; overflow: hidden; background-color: #000; } #header{ width: 100%; height: 100px; background-color: #FFF; } /* STEP 2: 頂部選單 */ #header ul { margin: 0 auto; width: 1000px; height: 100px; } #header li { float: left; padding-top: 10px; list-style-type: none; } #header li a{ padding: 25px 5px 0 5px; text-align: center; height: 40px; width: 100px; display: block; font-size: 16px; text-decoration: none; letter-spacing: 2px; color: #000; } /* SETP3: 頂部選單細部設計 */ #header ul li:nth-child(1){ margin:-10px 100px 0 130px; } #header ul li:nth-child(3):after, #header ul li:nth-child(4):after, #header ul li:nth-child(5):after, #header ul li:nth-child(6):after, #header ul li:nth-child(7):after{ display:block; content:""; background:url(../images/line.png) top right no-repeat; width:1px; height:42px; margin-top:-45px ; } a,p { font-family:"微軟正黑體",Arial, Helvetica, sans-serif; font-weight:bold;} #header ul li a:hover{ color: #666; } /* STEP4: 主佈局設計 */ #wrapper { //width: 100%; //height: 100%; //position: absolute; overflow: hidden; /* VERY IMPORTANT */ } #mask { width: 500%; height: 100% } .box { width: 20%; height: 100%; float: left; list-style-type: none; } .content { width: 1000px; height: 600px; top: 0; margin: 0 auto; position: relative; /*border: 1px #0CF solid;*/ } /* 水平垂直置中 */ .content .text { font-size: 1em; width: 600px; height: 100px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; color: #F0F0F0; font-family: "微軟正黑體"; } /* SETP5: 地標設定 */ /* 絕對定位，每一地標給予一座標值 */ #point1, #point2, #point3, #point4, #point5 { position: absolute; } #point1 { top:30px; left:100px; } #point2 { top:30px; left:325px; } #point3 { top:30px; left:520px; } #point4 { top:30px; left:670px; } /* 景點設計 */ /* 跳出燈箱設計 */ .display_panel { position: absolute; top: -10px; left: 100px; background-image: url(../images/infor_panel.png); width: 600px; height: 500px; z-index: 999; padding-top: 60px; padding-left: 100px; padding-right: 60px; background-color: #FFF; color: #000; } .description { margin-top: 15px; } .x_btn{ position: absolute; top:20px; right:10px; cursor:pointer; z-index: 10000} [hr] 3. 2015/5/28上課影音 HTML/CSS/jQuery物件小動畫、燈箱效果 https://youtu.be/Ukgn3h2aFo0 [hr] 範例檔案下載 http://mepopedia.com/~css104-2c/hw08/ex/hw08.rar 參考講義 [講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果 http://mepopedia.com/forum/read.php?804,46224 http://mepopedia.com/forum/read.php?804,81401,81401#msg-81401 Sat, 27 Jun 2026 20:44:35 +0800 Phorum 5.2.7 http://mepopedia.com/forum/read.php?804,81401,81401#msg-81401 [講義] HTML/CSS/jQuery 物件小動畫與燈箱效果 http://mepopedia.com/forum/read.php?804,81401,81401#msg-81401
  1. 1. step5: 地標設定
  2. 2. 學長姊範例
  3. 3. 2015/5/28上課影音

1. step5: 地標設定



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

2. 學長姊範例


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-2c/hw08/ex/0519BPL

重點：
CSS絕對定位：position: absolute;
CSS定位座標：top, bottom, left, right

定位分為：絕對定位position: absolute; 與相對定位 position: relative;
本範例使用的是絕對定位

[img]http://i.imgur.com/kPNRsjk.jpg[/img]


1.於Menber #section3 加入物件跳動元素
<html> <head> <title>2NE1</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="header"><!--HEADER--> <ul id="menu"> <li><a href="#section1"><img src="images/logo.jpg" width="150" height="51"></a></li> <li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section2"> About</a></li> <li><img style="position:absolute; padding:30px 1px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section3">Member</a></li> <li><img style="position:absolute; padding:30px 0px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section4">Concerts</a></li> <li><img style="position:absolute; padding:30px 9px;" img src="images/blackjack.jpg" width="10" height="12"><a href="#section5">Song</a></li> </ul> </div><!--HEADER結束--> <div id="wrapper"> <ul id="mask"> <li id="section1" class="box"> <div class="content"> <img src="images/2ne1.jpg" width="900" height="475"> </div> </li><!--首頁結束 --> <li id="section2" class="box"><!--FIRST--> <div class="content"> <center> <img src="images/2.gif" width="500" height="228"> </center> <div class="text"> <p>2NE1（韓語：투애니원），為韓國YG娛樂旗下的四人女子團體，成員包括Bom、Dara、CL及Minzy。</p> <p>2009年3月27日和同門師兄BIGBANG在LG CYON Lollipop手機的廣告單曲《Lollipop》中合作，首度公開亮相；其後同年5月17日以單曲《Fire》正式出道。</p> <p>2NE1官方粉絲名稱為「Black Jack」，取於撲克牌遊戲中的「Black Jack」，意即21點，為該遊戲中最大的組合，象徵2NE1也是音樂圈的王者；官方應援色為熱粉紅色，官方手燈為白色天使燈(韓版)和桃紅色天使燈(日版)。</p> </div> </div> <li id="section3" class="box"><!--FIRST--> <div class="content"> <a href="#" class="point" id="point1"><img src="images/2ne1-cl.png" width="220" height="403"></a> <a href="#" class="point" id="point2"><img src="images/2ne1-bom.png" width="193" height="403"></a> <a href="#" class="point" id="point3"><img src="images/2ne1-dara.png" width="144" height="403"></a> <a href="#" class="point" id="point4"><img src="images/2ne1-minzy.png" width="178" height="403"></a> <div class="display_panel" id="s1panel_1"> <div class="panel_title"><img src="images/cl-1.png" width="100" height="37"></div> <p></p> <div class="panel_phtoto"><img src="images/cl.png" width="600" height="229"></div> <p class="description"> <p>李彩麟（Lee Chae-Lin，英語：Faith Lee，1991年2月26日－），藝名CL（韓語：씨엘），韓國女歌手、饒舌歌手、舞者。</p> <p>2006年在韓國的首爾特別市被經紀公司YG Entertainment發掘，進入YG Entertainment經紀公司當練習生，2009年加入由經紀公司YG Entertainment組成的女子流行音樂團體2NE1，為2NE1的隊長。</p> </p> <div class="x_btn"><img src="images/blackjack.png" width="48" height="54"></div> </div> <div class="display_panel" id="s1panel_2"> <div class="panel_title"> <img src="images/bom-1.png" width="100" height="37"></div> <p></p> <div class="panel_phtoto"><img src="images/bom.png" width="600" height="229"></div> <p class="description"> <p>朴春（英語：Jenny Park，박봄／朴봄 Park Bom，1984年3月24日－），藝名Bom（봄／春），韓國女歌手、舞者。</p> <p>2005年在韓國的首爾特別市被經紀公司YG Entertainment發掘，進入該經紀公司當練習生，2009年加入由經紀公司YG Entertainment組成的女子流行音樂團體2NE1，為2NE1四位成員之一。</p> </p> <div class="x_btn"><img src="images/blackjack.png" width="48" height="55"></div> </div> <div class="display_panel" id="s1panel_3"> <div class="panel_title"><img src="images/dara-1.png" width="100" height="37"></div> <p></p> <div class="panel_phtoto"><img src="images/dara.png" width="600" height="229"></div> <p class="description"> <p>Dara（英語：Sandara Park，韓語：다라，本名：박산다라，漢字：朴산다라，1984年11月12日－），韓國女歌手、演員、舞者、電視節目主持人。</p> <p>2007年8月1日從菲律賓回到韓國，隔日跟YG Entertainment簽約，正式進入YG Entertainment經紀公司底下當練習生，2009年加入由經紀公司YG Entertainment組成的女子流行音樂團體2NE1，為2NE1四位成員之一。</p> </p> <div class="x_btn"><img src="images/blackjack.png" width="48" height="55"></div> </div> <div class="display_panel" id="s1panel_4"> <div class="panel_title"><img src="images/minzy-1.png" width="100" height="37"></div> <p></p> <div class="panel_phtoto"><img src="images/minzy.png" width="600" height="229"></div> <p class="description"> <p>Minzy（英語：Gong Min-ji，韓語：민지，本名：공민지，漢字：孔旻智，1994年1月18日－），韓國女歌手、舞者。</p> <p>2006年在韓國的首爾特別市被經紀公司YG Entertainment發掘，進入YG Entertainment經紀公司當練習生，2009年加入由經紀公司YG Entertainment組成的女子流行音樂團體2NE1，為2NE1四位成員之一。</p> </p> <div class="x_btn"><img src="images/blackjack.png" width="48" height="55"></div> </div> </div> </li><!--END OF FIRST PAGE--> <li id="section4" class="box"> <!--FIRST--> <div class="content"> <center> <img src="images/3.jpg" width="800" height="533"> </center> </div> <li id="section5" class="box"><!--FIRST--> <div class="content"> <center> <iframe width="560" height="315" src="https://www.youtube.com/embed/vLbfv-AAyvQ" frameborder="0" allowfullscreen></iframe> </center> </div> </li><!--END OF FIRST PAGE--> </ul><!-- end mask --> </div><!-- end wrapper --> </body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> <script type="text/javascript" src="http://mepopedia.com/~jinjin/js/jquery.scrollTo-1.4.2-min.js"></script> <script> $(document).ready(function() { $('#menu a').click(function () { $('#wrapper').scrollTo($(this).attr('href'), 1000); return false; }); }); setInterval(function(){ $("#point1").animate({top:"-=15px"},1000).animate({top:"+=15px"}, 1000); }, 2000); setInterval(function(){ $("#point2").animate({top:"+=15px"},1000).animate({top:"-=15px"}, 1000); }, 2000); setInterval(function(){ $("#point3").animate({top:"-=15px"},1000).animate({top:"+=15px"}, 1000); }, 2000); setInterval(function(){ $("#point4").animate({top:"+=15px"},1000).animate({top:"-=15px"}, 1000); }, 2000); // 隱藏燈箱 $('.display_panel').hide(); // 打開燈箱 (fadeIn) $('#point1').click(function (){ $('#s1panel_1').fadeIn(500); return false; }); // 關閉燈箱 $('.x_btn').click(function (){ $('.display_panel').hide(); return false; }); // 打開燈箱 (fadeIn) $('#point2').click(function (){ $('#s1panel_2').fadeIn(500); return false; }); // 打開燈箱 (fadeIn) $('#point3').click(function (){ $('#s1panel_3').fadeIn(500); return false; }); // 打開燈箱 (fadeIn) $('#point4').click(function (){ $('#s1panel_4').fadeIn(500); return false; }); </script> </html>
[hr]
CSS
@charset "UTF-8"; /* CSS Document */ body { width: 100%; overflow: hidden; background-color: #000; } #header{ width: 100%; height: 100px; background-color: #FFF; } /* STEP 2: 頂部選單 */ #header ul { margin: 0 auto; width: 1000px; height: 100px; } #header li { float: left; padding-top: 10px; list-style-type: none; } #header li a{ padding: 25px 5px 0 5px; text-align: center; height: 40px; width: 100px; display: block; font-size: 16px; text-decoration: none; letter-spacing: 2px; color: #000; } /* SETP3: 頂部選單細部設計 */ #header ul li:nth-child(1){ margin:-10px 100px 0 130px; } #header ul li:nth-child(3):after, #header ul li:nth-child(4):after, #header ul li:nth-child(5):after, #header ul li:nth-child(6):after, #header ul li:nth-child(7):after{ display:block; content:""; background:url(../images/line.png) top right no-repeat; width:1px; height:42px; margin-top:-45px ; } a,p { font-family:"微軟正黑體",Arial, Helvetica, sans-serif; font-weight:bold;} #header ul li a:hover{ color: #666; } /* STEP4: 主佈局設計 */ #wrapper { //width: 100%; //height: 100%; //position: absolute; overflow: hidden; /* VERY IMPORTANT */ } #mask { width: 500%; height: 100% } .box { width: 20%; height: 100%; float: left; list-style-type: none; } .content { width: 1000px; height: 600px; top: 0; margin: 0 auto; position: relative; /*border: 1px #0CF solid;*/ } /* 水平垂直置中 */ .content .text { font-size: 1em; width: 600px; height: 100px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; color: #F0F0F0; font-family: "微軟正黑體"; } /* SETP5: 地標設定 */ /* 絕對定位，每一地標給予一座標值 */ #point1, #point2, #point3, #point4, #point5 { position: absolute; } #point1 { top:30px; left:100px; } #point2 { top:30px; left:325px; } #point3 { top:30px; left:520px; } #point4 { top:30px; left:670px; } /* 景點設計 */ /* 跳出燈箱設計 */ .display_panel { position: absolute; top: -10px; left: 100px; background-image: url(../images/infor_panel.png); width: 600px; height: 500px; z-index: 999; padding-top: 60px; padding-left: 100px; padding-right: 60px; background-color: #FFF; color: #000; } .description { margin-top: 15px; } .x_btn{ position: absolute; top:20px; right:10px; cursor:pointer; z-index: 10000}
[hr]

3. 2015/5/28上課影音


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


[hr]
範例檔案下載
http://mepopedia.com/~css104-2c/hw08/ex/hw08.rar

參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224]]> JinJin 網頁設計與語法（HTML/CSS） Tue, 17 May 2016 13:06:01 +0800