Change History
Message: [講義] HTML/CSS/jQuery 物件小動畫與燈箱效果
Changed By: JinJin
Change Date: May 25, 2017 09:27AM
[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果
Change Date: May 25, 2017 09:27AM
[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果
<h2>step5: 地標設定</h2>
上課範例
http://mepopedia.com/~css104-2c/hw08/ex/hw08-1025445070
<h2>學長姊範例</h2>
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
<b>重點：</b>
<b>CSS絕對定位：position: absolute;
CSS定位座標：top, bottom, left, right</b>
定位分為：絕對定位position: absolute; 與相對定位 position: relative;
本範例使用的是絕對定位
[img]http://i.imgur.com/kPNRsjk.jpg[/img]
<b>1.於Menber #section3 加入物件跳動元素</b>
<xmp><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;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@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;
at;
// 打開燈箱 (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></xmp>
[hr]
CSS
<xmp>
@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}</xmp>
[hr]
<h2>2015/5/28上課影音</h2>
HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0
<iframe width="853" height="480" src="https://www.youtube.com/embed/Ukgn3h2aFo0?rel=0" frameborder="0" allowfullscreen></iframe>
[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/~css104-2c/hw08/ex/hw08-1025445070
<h2>學長姊範例</h2>
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
<b>重點：</b>
<b>CSS絕對定位：position: absolute;
CSS定位座標：top, bottom, left, right</b>
定位分為：絕對定位position: absolute; 與相對定位 position: relative;
本範例使用的是絕對定位
[img]http://i.imgur.com/kPNRsjk.jpg[/img]
<b>1.於Menber #section3 加入物件跳動元素</b>
<xmp><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;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@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;
at;
// 打開燈箱 (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></xmp>
[hr]
CSS
<xmp>
@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}</xmp>
[hr]
<h2>2015/5/28上課影音</h2>
HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0
<iframe width="853" height="480" src="https://www.youtube.com/embed/Ukgn3h2aFo0?rel=0" frameborder="0" allowfullscreen></iframe>
[hr]
範例檔案下載
http://mepopedia.com/~css104-2c/hw08/ex/hw08.rar
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224
Changed By: JinJin
Change Date: May 11, 2017 09:24AM
[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果
Change Date: May 11, 2017 09:24AM
[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果
<h2>step5: 地標設定</h2>
上課範例
http://mepopedia.com/~css104-2c/hw08/ex/hw08-1025445070
<h2>學長姊範例</h2>
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
<b>重點：</b>
<b>CSS絕對定位：position: absolute;
CSS定位座標：top, bottom, left, right</b>
定位分為：絕對定位position: absolute; 與相對定位 position: relative;
本範例使用的是絕對定位
[img]http://i.imgur.com/kPNRsjk.jpg[/img]
<b>1.於Menber #section3 加入物件跳動元素</b>
<xmp><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;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@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;
}
#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;
}
.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: 地標設定 */
*/
-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;
// 打開燈箱 (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></xmp>
[hr]
CSS
<xmp>
@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}</xmp>
[hr]
<h2>2015/5/28上課影音</h2>
HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0
<iframe width="853" height="480" src="https://www.youtube.com/embed/Ukgn3h2aFo0?rel=0" frameborder="0" allowfullscreen></iframe>
[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/~css104-2c/hw08/ex/hw08-1025445070
<h2>學長姊範例</h2>
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
<b>重點：</b>
<b>CSS絕對定位：position: absolute;
CSS定位座標：top, bottom, left, right</b>
定位分為：絕對定位position: absolute; 與相對定位 position: relative;
本範例使用的是絕對定位
[img]http://i.imgur.com/kPNRsjk.jpg[/img]
<b>1.於Menber #section3 加入物件跳動元素</b>
<xmp><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;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@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;
}
#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;
}
.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: 地標設定 */
*/
-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;
// 打開燈箱 (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></xmp>
[hr]
CSS
<xmp>
@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}</xmp>
[hr]
<h2>2015/5/28上課影音</h2>
HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0
<iframe width="853" height="480" src="https://www.youtube.com/embed/Ukgn3h2aFo0?rel=0" frameborder="0" allowfullscreen></iframe>
[hr]
範例檔案下載
http://mepopedia.com/~css104-2c/hw08/ex/hw08.rar
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224
Changed By: JinJin
Change Date: May 04, 2017 11:48AM
[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果
Change Date: May 04, 2017 11:48AM
[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果
<h2>step5: 地標設定</h2>
上課範例
http://mepopedia.com/~css104-2c/hw08/ex/hw08-1025445070
<h2>學長姊範例</h2>
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
<b>重點：</b>
<b>CSS絕對定位：position: absolute;
CSS定位座標：top, bottom, left, right</b>
定位分為：絕對定位position: absolute; 與相對定位 position: relative;
本範例使用的是絕對定位
[img]http://i.imgur.com/kPNRsjk.jpg[/img]
<b>1.於Menber #section3 加入物件跳動元素</b>
<xmp><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/tumblr_m691uhqdUJ1rxs8dio1_1280.jpg" width="150" height="51"></a></li>
<li><img style="position:absolute; tyle="position:absolute; tion1"><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">
<9002ne1d="mask">
<li id="section1" class="box">
<div class="content">
<img src="images/2ne1.jpg" width="900" height="475">
</div>
</li> <!--首頁結束 -->
tumblr_n1nnulp9md1rm05eoo1_5002 <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/1920251_729079367141260_2590136934394327577_n.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(){
<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="co
ntent">
<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;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@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;
}
#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;
}
.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: 地標設定 */
-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;
// 打開燈箱 (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></xmp>
[hr]
CSS
<xmp>
@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}</xmp>
[hr]
<h2>2015/5/28上課影音</h2>
HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0
<iframe width="853" height="480" src="https://www.youtube.com/embed/Ukgn3h2aFo0?rel=0" frameborder="0" allowfullscreen></iframe>
[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/~css104-2c/hw08/ex/hw08-1025445070
<h2>學長姊範例</h2>
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
<b>重點：</b>
<b>CSS絕對定位：position: absolute;
CSS定位座標：top, bottom, left, right</b>
定位分為：絕對定位position: absolute; 與相對定位 position: relative;
本範例使用的是絕對定位
[img]http://i.imgur.com/kPNRsjk.jpg[/img]
<b>1.於Menber #section3 加入物件跳動元素</b>
<xmp><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/tumblr_m691uhqdUJ1rxs8dio1_1280.jpg" width="150" height="51"></a></li>
<li><img style="position:absolute; tyle="position:absolute; tion1"><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">
<9002ne1d="mask">
<li id="section1" class="box">
<div class="content">
<img src="images/2ne1.jpg" width="900" height="475">
</div>
</li> <!--首頁結束 -->
tumblr_n1nnulp9md1rm05eoo1_5002 <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/1920251_729079367141260_2590136934394327577_n.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(){
<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="co
ntent">
<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;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@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;
}
#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;
}
.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: 地標設定 */
-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;
// 打開燈箱 (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></xmp>
[hr]
CSS
<xmp>
@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}</xmp>
[hr]
<h2>2015/5/28上課影音</h2>
HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0
<iframe width="853" height="480" src="https://www.youtube.com/embed/Ukgn3h2aFo0?rel=0" frameborder="0" allowfullscreen></iframe>
[hr]
範例檔案下載
http://mepopedia.com/~css104-2c/hw08/ex/hw08.rar
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224
Changed By: JinJin
Change Date: May 03, 2017 11:46PM
[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果
Change Date: May 03, 2017 11:46PM
[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果
<h2>step5: 地標設定</h2>
上課範例
http://mepopedia.com/~css104-2c/hw08/ex/hw08-1025445070
<h2>學長姊範例</h2>
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
<b>重點：</b>
<b>CSS絕對定位：position: absolute;
CSS定位座標：top, bottom, left, right</b>
定位分為：絕對定位position: absolute; 與相對定位 position: relative;
本範例使用的是絕對定位
[img] http://i.imgur.com/kPNRsjk.jpg [/img]
本範例使用的是絕對定位
[img]http://i.imgur.com/kPNRsjk.jpg[/img]
<b>1.於Menber #section3 加入物件跳動元素</b>
<xmp><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/tumblr_m691uhqdUJ1rxs8dio1_1280.jpg" width="150" height="51"></a></li>
<li><img style="position:absolute; tion1"><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">
<900d="mask">
<li id="section1" class="box">
<div class="content">
<img src="images/2ne1.jpg" width="900" height="475">
</div>
</li> <!--首頁結束 -->
tumblr_n1nnulp9md1rm05eoo1_500 <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/1920251_729079367141260_2590136934394327577_n.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(){
<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="co
ntent">
<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;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@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;
}
#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;
}
.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: 地標設定 */
-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;
// 打開燈箱 (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></xmp>
[hr]
CSS
<xmp>
@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}</xmp>
[hr]
<h2>2015/5/28上課影音</h2>
HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0
<iframe width="853" height="480" src="https://www.youtube.com/embed/Ukgn3h2aFo0?rel=0" frameborder="0" allowfullscreen></iframe>
[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/~css104-2c/hw08/ex/hw08-1025445070
<h2>學長姊範例</h2>
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
<b>重點：</b>
<b>CSS絕對定位：position: absolute;
CSS定位座標：top, bottom, left, right</b>
定位分為：絕對定位position: absolute; 與相對定位 position: relative;
本範例使用的是絕對定位
[img] http://i.imgur.com/kPNRsjk.jpg [/img]
本範例使用的是絕對定位
[img]http://i.imgur.com/kPNRsjk.jpg[/img]
<b>1.於Menber #section3 加入物件跳動元素</b>
<xmp><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/tumblr_m691uhqdUJ1rxs8dio1_1280.jpg" width="150" height="51"></a></li>
<li><img style="position:absolute; tion1"><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">
<900d="mask">
<li id="section1" class="box">
<div class="content">
<img src="images/2ne1.jpg" width="900" height="475">
</div>
</li> <!--首頁結束 -->
tumblr_n1nnulp9md1rm05eoo1_500 <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/1920251_729079367141260_2590136934394327577_n.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(){
<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="co
ntent">
<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;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@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;
}
#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;
}
.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: 地標設定 */
-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;
// 打開燈箱 (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></xmp>
[hr]
CSS
<xmp>
@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}</xmp>
[hr]
<h2>2015/5/28上課影音</h2>
HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0
<iframe width="853" height="480" src="https://www.youtube.com/embed/Ukgn3h2aFo0?rel=0" frameborder="0" allowfullscreen></iframe>
[hr]
範例檔案下載
http://mepopedia.com/~css104-2c/hw08/ex/hw08.rar
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224
Changed By: JinJin
Change Date: May 03, 2017 11:37PM
[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果
Change Date: May 03, 2017 11:37PM
[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果
<h2>step5: 地標設定</h2>
上課範例
http://mepopedia.com/~css104-2c/hw08/ex/hw08-1025445070
<h2>學長姊範例</h2>
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
<b>重點：</b>
<b>CSS絕對定位：position: absolute;
CSS定位座標：top, bottom, left, right</b>
定位分為：絕對定位position: absolute; 與相對定位 position: relative;
本範例使用的是絕對定位
[img] http://i.imgur.com/kPNRsjk.jpg [/img]
本範例使用的是絕對定位
[img]http://i.imgur.com/kPNRsjk.jpg[/img]
<b>1.於Menber #section3 加入物件跳動元素</b>
<xmp><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/tumblr_m691uhqdUJ1rxs8dio1_1280.jpg" width="150" height="51"></a></li>
<li><img style="position:absolute; tion1"><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">
<900d="mask">
<li id="section1" class="box">
<div class="content">
<img src="images/2ne1.jpg" width="900" height="475">
</div>
</li> <!--首頁結束 -->
tumblr_n1nnulp9md1rm05eoo1_500 <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/1920251_729079367141260_2590136934394327577_n.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(){
<li id="section4" class="box">
<!--FIRST-->
<div class="content">
<center>
<img src="images/3.jpg" width="800" height="533">
}, 2000);
// 隱藏燈箱
$('.display_panel').hide();
// 打開燈箱 (fadeIn)
$('#point1').click(function (){
$('#s1panel_1').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_panel').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@charset "UTF-8";
/* CSS Document */
cument */
ter>
</div>
<li id="section5" class="box"><!--FIRST-->
<div class="co
ntent">
<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;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@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;
}
#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;
}
.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: 地標設定 */
-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;
// 打開燈箱 (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></xmp>
[hr]
CSS
<xmp>
@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}</xmp>
[hr]
<h2>2015/5/28上課影音</h2>
HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0
<iframe width="853" height="480" src="https://www.youtube.com/embed/Ukgn3h2aFo0?rel=0" frameborder="0" allowfullscreen></iframe>
[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/~css104-2c/hw08/ex/hw08-1025445070
<h2>學長姊範例</h2>
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
<b>重點：</b>
<b>CSS絕對定位：position: absolute;
CSS定位座標：top, bottom, left, right</b>
定位分為：絕對定位position: absolute; 與相對定位 position: relative;
本範例使用的是絕對定位
[img] http://i.imgur.com/kPNRsjk.jpg [/img]
本範例使用的是絕對定位
[img]http://i.imgur.com/kPNRsjk.jpg[/img]
<b>1.於Menber #section3 加入物件跳動元素</b>
<xmp><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/tumblr_m691uhqdUJ1rxs8dio1_1280.jpg" width="150" height="51"></a></li>
<li><img style="position:absolute; tion1"><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">
<900d="mask">
<li id="section1" class="box">
<div class="content">
<img src="images/2ne1.jpg" width="900" height="475">
</div>
</li> <!--首頁結束 -->
tumblr_n1nnulp9md1rm05eoo1_500 <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/1920251_729079367141260_2590136934394327577_n.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(){
<li id="section4" class="box">
<!--FIRST-->
<div class="content">
<center>
<img src="images/3.jpg" width="800" height="533">
}, 2000);
// 隱藏燈箱
$('.display_panel').hide();
// 打開燈箱 (fadeIn)
$('#point1').click(function (){
$('#s1panel_1').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_panel').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@charset "UTF-8";
/* CSS Document */
cument */
ter>
</div>
<li id="section5" class="box"><!--FIRST-->
<div class="co
ntent">
<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;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@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;
}
#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;
}
.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: 地標設定 */
-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;
// 打開燈箱 (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></xmp>
[hr]
CSS
<xmp>
@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}</xmp>
[hr]
<h2>2015/5/28上課影音</h2>
HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0
<iframe width="853" height="480" src="https://www.youtube.com/embed/Ukgn3h2aFo0?rel=0" frameborder="0" allowfullscreen></iframe>
[hr]
範例檔案下載
http://mepopedia.com/~css104-2c/hw08/ex/hw08.rar
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224
Changed By: JinJin
Change Date: May 03, 2017 10:24PM
[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果
Change Date: May 03, 2017 10:24PM
[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果
<h2>step5: 地標設定</h2>
上課範例
http://mepopedia.com/~css104-2c/hw08/ex/hw08-1025445070
<h2>學長姊範例</h2>
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
<b>重點：</b>
<b>CSS絕對定位：position: absolute;
CSS定位座標：top, bottom, left, right</b>
ve;
位分為：絕對定位position: absolute; 與相對定位 position: relative;
本範例使用的是絕對定位
[img] http://i.imgur.com/kPNRsjk.jpg [/img]
本範例使用的是絕對定位
[img]http://i.imgur.com/kPNRsjk.jpg[/img]
<b>1.於Menber #section3 加入物件跳動元素</b>
<xmp><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/tumblr_m691uhqdUJ1rxs8dio1_1280.jpg" width="150" height="51"></a></li>
<li><img style="position:absolute; tion1"><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">
<900d="mask">
<li id="section1" class="box">
<div class="content">
<img src="images/2ne1.jpg" width="900" height="475">
</div>
</li> <!--首頁結束 -->
tumblr_n1nnulp9md1rm05eoo1_500 <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/1920251_729079367141260_2590136934394327577_n.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(){
<li id="section4" class="box">
<!--FIRST-->
<div class="content">
<center>
<img src="images/3.jpg" width="800" height="533">
}, 2000);
// 隱藏燈箱
$('.display_panel').hide();
// 打開燈箱 (fadeIn)
$('#point1').click(function (){
$('#s1panel_1').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_panel').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@charset "UTF-8";
/* CSS Document */
ter>
</div>
<li id="section5" class="box"><!--FIRST-->
<div class="co
ntent">
<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;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@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;
}
#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;
}
.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: 地標設定 */
-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;
// 打開燈箱 (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></xmp>
[hr]
CSS
<xmp>
@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}</xmp>
[hr]
<h2>2015/5/28上課影音</h2>
HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0
<iframe width="853" height="480" src="https://www.youtube.com/embed/Ukgn3h2aFo0?rel=0" frameborder="0" allowfullscreen></iframe>
[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/~css104-2c/hw08/ex/hw08-1025445070
<h2>學長姊範例</h2>
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
<b>重點：</b>
<b>CSS絕對定位：position: absolute;
CSS定位座標：top, bottom, left, right</b>
ve;
位分為：絕對定位position: absolute; 與相對定位 position: relative;
本範例使用的是絕對定位
[img] http://i.imgur.com/kPNRsjk.jpg [/img]
本範例使用的是絕對定位
[img]http://i.imgur.com/kPNRsjk.jpg[/img]
<b>1.於Menber #section3 加入物件跳動元素</b>
<xmp><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/tumblr_m691uhqdUJ1rxs8dio1_1280.jpg" width="150" height="51"></a></li>
<li><img style="position:absolute; tion1"><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">
<900d="mask">
<li id="section1" class="box">
<div class="content">
<img src="images/2ne1.jpg" width="900" height="475">
</div>
</li> <!--首頁結束 -->
tumblr_n1nnulp9md1rm05eoo1_500 <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/1920251_729079367141260_2590136934394327577_n.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(){
<li id="section4" class="box">
<!--FIRST-->
<div class="content">
<center>
<img src="images/3.jpg" width="800" height="533">
}, 2000);
// 隱藏燈箱
$('.display_panel').hide();
// 打開燈箱 (fadeIn)
$('#point1').click(function (){
$('#s1panel_1').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_panel').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@charset "UTF-8";
/* CSS Document */
ter>
</div>
<li id="section5" class="box"><!--FIRST-->
<div class="co
ntent">
<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;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@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;
}
#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;
}
.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: 地標設定 */
-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;
// 打開燈箱 (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></xmp>
[hr]
CSS
<xmp>
@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}</xmp>
[hr]
<h2>2015/5/28上課影音</h2>
HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0
<iframe width="853" height="480" src="https://www.youtube.com/embed/Ukgn3h2aFo0?rel=0" frameborder="0" allowfullscreen></iframe>
[hr]
範例檔案下載
http://mepopedia.com/~css104-2c/hw08/ex/hw08.rar
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224
Changed By: JinJin
Change Date: May 01, 2017 03:41PM
[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果
Change Date: May 01, 2017 03:41PM
[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果
<h2>step5: 地標設定</h2>
上課範例
http://mepopedia.com/~css104-2c/hw08/ex/hw08-1025445070
<h2>學長姊範例</h2>
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
<b>重點：</b>
<b>CSS絕對定位：position: absolute;
CSS定位座標：top, bottom, left, right</b>
位分為：絕對定位position: absolute; 與相對定位 position: relative;
本範例使用的是絕對定位
[img] http://i.imgur.com/kPNRsjk.jpg [/img]
本範例使用的是絕對定位
[img]http://i.imgur.com/kPNRsjk.jpg[/img]
<b>1.於Menber #section3 加入物件跳動元素</b>
<xmp><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/tumblr_m691uhqdUJ1rxs8dio1_1280.jpg" width="150" height="51"></a></li>
<li><img style="position:absolute; tion1"><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">
<900d="mask">
<li id="section1" class="box">
<div class="content">
<img src="images/2ne1.jpg" width="900" height="475">
</div>
</li> <!--首頁結束 -->
tumblr_n1nnulp9md1rm05eoo1_500 <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/1920251_729079367141260_2590136934394327577_n.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(){
<li id="section4" class="box">
<!--FIRST-->
<div class="content">
<center>
<img src="images/3.jpg" width="800" height="533">
}, 2000);
// 隱藏燈箱
$('.display_panel').hide();
// 打開燈箱 (fadeIn)
$('#point1').click(function (){
$('#s1panel_1').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_panel').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.displ // 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@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;
}
#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,
r,
pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@charset "UTF-8";
/* CSS Document */
ter>
</div>
<li id="section5" class="box"><!--FIRST-->
<div class="co
ntent">
<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;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@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;
}
#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;
}
.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: 地標設定 */
-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;
// 打開燈箱 (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></xmp>
[hr]
CSS
<xmp>
@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}</xmp>
[hr]
<h2>2015/5/28上課影音</h2>
HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0
<iframe width="853" height="480" src="https://www.youtube.com/embed/Ukgn3h2aFo0?rel=0" frameborder="0" allowfullscreen></iframe>
[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/~css104-2c/hw08/ex/hw08-1025445070
<h2>學長姊範例</h2>
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
<b>重點：</b>
<b>CSS絕對定位：position: absolute;
CSS定位座標：top, bottom, left, right</b>
位分為：絕對定位position: absolute; 與相對定位 position: relative;
本範例使用的是絕對定位
[img] http://i.imgur.com/kPNRsjk.jpg [/img]
本範例使用的是絕對定位
[img]http://i.imgur.com/kPNRsjk.jpg[/img]
<b>1.於Menber #section3 加入物件跳動元素</b>
<xmp><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/tumblr_m691uhqdUJ1rxs8dio1_1280.jpg" width="150" height="51"></a></li>
<li><img style="position:absolute; tion1"><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">
<900d="mask">
<li id="section1" class="box">
<div class="content">
<img src="images/2ne1.jpg" width="900" height="475">
</div>
</li> <!--首頁結束 -->
tumblr_n1nnulp9md1rm05eoo1_500 <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/1920251_729079367141260_2590136934394327577_n.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(){
<li id="section4" class="box">
<!--FIRST-->
<div class="content">
<center>
<img src="images/3.jpg" width="800" height="533">
}, 2000);
// 隱藏燈箱
$('.display_panel').hide();
// 打開燈箱 (fadeIn)
$('#point1').click(function (){
$('#s1panel_1').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_panel').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.displ // 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@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;
}
#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,
r,
pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@charset "UTF-8";
/* CSS Document */
ter>
</div>
<li id="section5" class="box"><!--FIRST-->
<div class="co
ntent">
<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;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@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;
}
#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;
}
.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: 地標設定 */
-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;
// 打開燈箱 (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></xmp>
[hr]
CSS
<xmp>
@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}</xmp>
[hr]
<h2>2015/5/28上課影音</h2>
HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0
<iframe width="853" height="480" src="https://www.youtube.com/embed/Ukgn3h2aFo0?rel=0" frameborder="0" allowfullscreen></iframe>
[hr]
範例檔案下載
http://mepopedia.com/~css104-2c/hw08/ex/hw08.rar
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224
Changed By: JinJin
Change Date: May 31, 2016 02:06PM
[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果
Change Date: May 31, 2016 02:06PM
[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果
<h2>step5: 地標設定</h2>
上課範例
http://mepopedia.com/~css104-2c/hw08/ex/hw08-1025445070
<h2>學長姊範例</h2>
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
<b>重點：</b>
<b>CSS絕對定位：position: absolute;
CSS定位座標：top, bottom, left, right</b>
位分為：絕對定位position: absolute; 與相對定位 position: relative;
本範例使用的是絕對定位
[img] http://i.imgur.com/kPNRsjk.jpg [/img]
本範例使用的是絕對定位
[img]http://i.imgur.com/kPNRsjk.jpg[/img]
<b>1.於Menber #section3 加入物件跳動元素</b>
<xmp><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/tumblr_m691uhqdUJ1rxs8dio1_1280.jpg" width="150" height="51"></a></li>
<li><img style="position:absolute; tion1"><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">
<900d="mask">
<li id="section1" class="box">
<div class="content">
<img src="images/2ne1.jpg" width="900" height="475">
</div>
</li> <!--首頁結束 -->
tumblr_n1nnulp9md1rm05eoo1_500 <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/1920251_729079367141260_2590136934394327577_n.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(){
<li id="section4" class="box">
<!--FIRST-->
<div class="content">
<center>
<img src="images/3.jpg" width="800" height="533">
}, 2000);
// 隱藏燈箱
$('.display_panel').hide();
// 打開燈箱 (fadeIn)
$('#point1').click(function (){
$('#s1panel_1').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_panel').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.displ // 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@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;
}
#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,
pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@charset "UTF-8";
/* CSS Document */
ter>
</div>
<li id="section5" class="box"><!--FIRST-->
<div class="co
ntent">
<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);
setInterhttp://mepopedia.com/~css104-2c/hw08/ex/hw08.zip
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224val(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;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@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;
}
#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;
}
.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: 地標設定 */
-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;
// 打開燈箱 (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></xmp>
[hr]
CSS
<xmp>
@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}</xmp>
[hr]
<h2>2015/5/28上課影音</h2>
HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0
<iframe width="853" height="480" src="https://www.youtube.com/embed/Ukgn3h2aFo0?rel=0" frameborder="0" allowfullscreen></iframe>
[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/~css104-2c/hw08/ex/hw08-1025445070
<h2>學長姊範例</h2>
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
<b>重點：</b>
<b>CSS絕對定位：position: absolute;
CSS定位座標：top, bottom, left, right</b>
位分為：絕對定位position: absolute; 與相對定位 position: relative;
本範例使用的是絕對定位
[img] http://i.imgur.com/kPNRsjk.jpg [/img]
本範例使用的是絕對定位
[img]http://i.imgur.com/kPNRsjk.jpg[/img]
<b>1.於Menber #section3 加入物件跳動元素</b>
<xmp><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/tumblr_m691uhqdUJ1rxs8dio1_1280.jpg" width="150" height="51"></a></li>
<li><img style="position:absolute; tion1"><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">
<900d="mask">
<li id="section1" class="box">
<div class="content">
<img src="images/2ne1.jpg" width="900" height="475">
</div>
</li> <!--首頁結束 -->
tumblr_n1nnulp9md1rm05eoo1_500 <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/1920251_729079367141260_2590136934394327577_n.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(){
<li id="section4" class="box">
<!--FIRST-->
<div class="content">
<center>
<img src="images/3.jpg" width="800" height="533">
}, 2000);
// 隱藏燈箱
$('.display_panel').hide();
// 打開燈箱 (fadeIn)
$('#point1').click(function (){
$('#s1panel_1').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_panel').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.displ // 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@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;
}
#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,
pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@charset "UTF-8";
/* CSS Document */
ter>
</div>
<li id="section5" class="box"><!--FIRST-->
<div class="co
ntent">
<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);
setInterhttp://mepopedia.com/~css104-2c/hw08/ex/hw08.zip
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224val(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;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@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;
}
#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;
}
.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: 地標設定 */
-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;
// 打開燈箱 (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></xmp>
[hr]
CSS
<xmp>
@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}</xmp>
[hr]
<h2>2015/5/28上課影音</h2>
HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0
<iframe width="853" height="480" src="https://www.youtube.com/embed/Ukgn3h2aFo0?rel=0" frameborder="0" allowfullscreen></iframe>
[hr]
範例檔案下載
http://mepopedia.com/~css104-2c/hw08/ex/hw08.rar
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224
Changed By: JinJin
Change Date: May 26, 2016 11:11AM
[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果
Change Date: May 26, 2016 11:11AM
[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果
<h2>step5: 地標設定</h2>
上課範例
http://mepopedia.com/~css104-2c/hw08/ex/hw08-1025445070
<h2>學長姊範例</h2>
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
<b>重點：</b>
<b>CSS絕對定位：position: absolute;
CSS定位座標：top, bottom, left, right</b>
位分為：絕對定位position: absolute; 與相對定位 position: relative;
本範例使用的是絕對定位
[img] http://i.imgur.com/kPNRsjk.jpg [/img]
本範例使用的是絕對定位
[img]http://i.imgur.com/kPNRsjk.jpg[/img]
<b>1.於Menber #section3 加入物件跳動元素</b>
<xmp><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/tumblr_m691uhqdUJ1rxs8dio1_1280.jpg" width="150" height="51"></a></li>
<li><img style="position:absolute; tion1"><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">
<900d="mask">
<li id="section1" class="box">
<div class="content">
<img src="images/2ne1.jpg" width="900" height="475">
</div>
</li> <!--首頁結束 -->
tumblr_n1nnulp9md1rm05eoo1_500 <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/1920251_729079367141260_2590136934394327577_n.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(){
<li id="section4" class="box">
<!--FIRST-->
<div class="content">
<center>
<img src="images/3.jpg" width="800" height="533">
}, 2000);
// 隱藏燈箱
$('.display_panel').hide();
// 打開燈箱 (fadeIn)
$('#point1').click(function (){
$('#s1panel_1').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_panel').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.displ // 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@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;
}
#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,
pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@charset "UTF-8";
/* CSS Document */
ter>
</div>
<li id="section5" class="box"><!--FIRST-->
<div class="co
ntent">
<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);
setInterhttp://mepopedia.com/~css104-2a/hw08/ex/hw08.zip
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224http://mepopedia.com/~css104-2c/hw08/ex/hw08.zip
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224val(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;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@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;
}
#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;
}
.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: 地標設定 */
-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;
// 打開燈箱 (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></xmp>
[hr]
CSS
<xmp>
@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}</xmp>
[hr]
<h2>2015/5/28上課影音</h2>
HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0
<iframe width="853" height="480" src="https://www.youtube.com/embed/Ukgn3h2aFo0?rel=0" frameborder="0" allowfullscreen></iframe>
[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/~css104-2c/hw08/ex/hw08-1025445070
<h2>學長姊範例</h2>
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
<b>重點：</b>
<b>CSS絕對定位：position: absolute;
CSS定位座標：top, bottom, left, right</b>
位分為：絕對定位position: absolute; 與相對定位 position: relative;
本範例使用的是絕對定位
[img] http://i.imgur.com/kPNRsjk.jpg [/img]
本範例使用的是絕對定位
[img]http://i.imgur.com/kPNRsjk.jpg[/img]
<b>1.於Menber #section3 加入物件跳動元素</b>
<xmp><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/tumblr_m691uhqdUJ1rxs8dio1_1280.jpg" width="150" height="51"></a></li>
<li><img style="position:absolute; tion1"><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">
<900d="mask">
<li id="section1" class="box">
<div class="content">
<img src="images/2ne1.jpg" width="900" height="475">
</div>
</li> <!--首頁結束 -->
tumblr_n1nnulp9md1rm05eoo1_500 <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/1920251_729079367141260_2590136934394327577_n.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(){
<li id="section4" class="box">
<!--FIRST-->
<div class="content">
<center>
<img src="images/3.jpg" width="800" height="533">
}, 2000);
// 隱藏燈箱
$('.display_panel').hide();
// 打開燈箱 (fadeIn)
$('#point1').click(function (){
$('#s1panel_1').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_panel').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.displ // 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@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;
}
#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,
pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@charset "UTF-8";
/* CSS Document */
ter>
</div>
<li id="section5" class="box"><!--FIRST-->
<div class="co
ntent">
<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);
setInterhttp://mepopedia.com/~css104-2a/hw08/ex/hw08.zip
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224http://mepopedia.com/~css104-2c/hw08/ex/hw08.zip
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224val(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;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@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;
}
#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;
}
.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: 地標設定 */
-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;
// 打開燈箱 (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></xmp>
[hr]
CSS
<xmp>
@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}</xmp>
[hr]
<h2>2015/5/28上課影音</h2>
HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0
<iframe width="853" height="480" src="https://www.youtube.com/embed/Ukgn3h2aFo0?rel=0" frameborder="0" allowfullscreen></iframe>
[hr]
範例檔案下載
http://mepopedia.com/~css104-2c/hw08/ex/hw08.rar
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224
Changed By: JinJin
Change Date: May 26, 2016 11:02AM
[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果
Change Date: May 26, 2016 11:02AM
[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果
<h2>step5: 地標設定</h2>
上課範例
http://mepopedia.com/~css104-2c/hw08/ex/hw08-1025445070
<h2>學長姊範例</h2>
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
<b>重點：</b>
<b>CSS絕對定位：position: absolute;
CSS定位座標：top, bottom, left, right</b>
位分為：絕對定位position: absolute; 與相對定位 position: relative;
本範例使用的是絕對定位
[img] http://i.imgur.com/kPNRsjk.jpg [/img]
本範例使用的是絕對定位
[img]http://i.imgur.com/kPNRsjk.jpg[/img]
<b>1.於Menber #section3 加入物件跳動元素</b>
<xmp><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/tumblr_m691uhqdUJ1rxs8dio1_1280.jpg" width="150" height="51"></a></li>
<li><img style="position:absolute; tion1"><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">
<900d="mask">
<li id="section1" class="box">
<div class="content">
<img src="images/2ne1.jpg" width="900" height="475">
</div>
</li> <!--首頁結束 -->
tumblr_n1nnulp9md1rm05eoo1_500 <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/1920251_729079367141260_2590136934394327577_n.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(){
<li id="section4" class="box">
<!--FIRST-->
<div class="content">
<center>
<img src="images/3.jpg" width="800" height="533">
}, 2000);
// 隱藏燈箱
$('.display_panel').hide();
// 打開燈箱 (fadeIn)
$('#point1').click(function (){
$('#s1panel_1').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_panel').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.displ // 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@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;
}
#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,
pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@charset "UTF-8";
/* CSS Document */
ter>
</div>
<li id="section5" class="box"><!--FIRST-->
<div class="co
ntent">
<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);
setInterhttp://mepopedia.com/~css104-2a/hw08/ex/hw08,zip
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224http://mepopedia.com/~css104-2a/hw08/ex/hw08.zip
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224http://mepopedia.com/~css104-2c/hw08/ex/hw08.zip
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224val(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;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@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;
}
#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;
}
.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: 地標設定 */
-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;
// 打開燈箱 (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></xmp>
[hr]
CSS
<xmp>
@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}</xmp>
[hr]
<h2>2015/5/28上課影音</h2>
HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0
<iframe width="853" height="480" src="https://www.youtube.com/embed/Ukgn3h2aFo0?rel=0" frameborder="0" allowfullscreen></iframe>
[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/~css104-2c/hw08/ex/hw08-1025445070
<h2>學長姊範例</h2>
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
<b>重點：</b>
<b>CSS絕對定位：position: absolute;
CSS定位座標：top, bottom, left, right</b>
位分為：絕對定位position: absolute; 與相對定位 position: relative;
本範例使用的是絕對定位
[img] http://i.imgur.com/kPNRsjk.jpg [/img]
本範例使用的是絕對定位
[img]http://i.imgur.com/kPNRsjk.jpg[/img]
<b>1.於Menber #section3 加入物件跳動元素</b>
<xmp><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/tumblr_m691uhqdUJ1rxs8dio1_1280.jpg" width="150" height="51"></a></li>
<li><img style="position:absolute; tion1"><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">
<900d="mask">
<li id="section1" class="box">
<div class="content">
<img src="images/2ne1.jpg" width="900" height="475">
</div>
</li> <!--首頁結束 -->
tumblr_n1nnulp9md1rm05eoo1_500 <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/1920251_729079367141260_2590136934394327577_n.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(){
<li id="section4" class="box">
<!--FIRST-->
<div class="content">
<center>
<img src="images/3.jpg" width="800" height="533">
}, 2000);
// 隱藏燈箱
$('.display_panel').hide();
// 打開燈箱 (fadeIn)
$('#point1').click(function (){
$('#s1panel_1').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_panel').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.displ // 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@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;
}
#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,
pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@charset "UTF-8";
/* CSS Document */
ter>
</div>
<li id="section5" class="box"><!--FIRST-->
<div class="co
ntent">
<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);
setInterhttp://mepopedia.com/~css104-2a/hw08/ex/hw08,zip
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224http://mepopedia.com/~css104-2a/hw08/ex/hw08.zip
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224http://mepopedia.com/~css104-2c/hw08/ex/hw08.zip
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224val(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;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@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;
}
#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;
}
.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: 地標設定 */
-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;
// 打開燈箱 (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></xmp>
[hr]
CSS
<xmp>
@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}</xmp>
[hr]
<h2>2015/5/28上課影音</h2>
HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0
<iframe width="853" height="480" src="https://www.youtube.com/embed/Ukgn3h2aFo0?rel=0" frameborder="0" allowfullscreen></iframe>
[hr]
範例檔案下載
http://mepopedia.com/~css104-2c/hw08/ex/hw08.rar
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224
Changed By: JinJin
Change Date: May 17, 2016 03:54PM
[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果
Change Date: May 17, 2016 03:54PM
[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果
<h2>step5: 地標設定</h2>
上課範例
http://mepopedia.com/~css104-2c/hw08/ex/hw08-1025445070
<h2>學長姊範例</h2>
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
<b>重點：</b>
<b>CSS絕對定位：position: absolute;
CSS定位座標：top, bottom, left, right</b>
位分為：絕對定位position: absolute; 與相對定位 position: relative;
本範例使用的是絕對定位
[img] http://i.imgur.com/kPNRsjk.jpg [/img]
本範例使用的是絕對定位
[img]http://i.imgur.com/kPNRsjk.jpg[/img]
<b>1.於Menber #section3 加入物件跳動元素</b>
<xmp><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/tumblr_m691uhqdUJ1rxs8dio1_1280.jpg" width="150" height="51"></a></li>
<li><img style="position:absolute; tion1"><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">
<900d="mask">
<li id="section1" class="box">
<div class="content">
<img src="images/2ne1.jpg" width="900" height="475">
</div>
</li> <!--首頁結束 -->
tumblr_n1nnulp9md1rm05eoo1_500 <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/1920251_729079367141260_2590136934394327577_n.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(){
<li id="section4" class="box">
<!--FIRST-->
<div class="content">
<center>
<img src="images/3.jpg" width="800" height="533">
}, 2000);
// 隱藏燈箱
$('.display_panel').hide();
// 打開燈箱 (fadeIn)
$('#point1').click(function (){
$('#s1panel_1').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_panel').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.displ // 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@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;
}
#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,
pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@charset "UTF-8";
/* CSS Document */
ter>
</div>
<li id="section5" class="box"><!--FIRST-->
.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}</xmp>
[hr]
<h2>2015/5/28上課影音</h2>
HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0
<iframe width="853" height="480" src="https://www.youtube.com/embed/Ukgn3h2aFo0?rel=0" frameborder="0" allowfullscreen></iframe>
[hr]
範例檔案下載
http://mepopedia.com/~css104-2a/hw08/ex/hw08,zip
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224 <div class="co
ntent">
<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);
setInterhttp://mepopedia.com/~css104-2a/hw08/ex/hw08,zip
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224http://mepopedia.com/~css104-2a/hw08/ex/hw08.zip
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224http://mepopedia.com/~css104-2c/hw08/ex/hw08.zip
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224val(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;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@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;
}
#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;
}
.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: 地標設定 */
-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;
// 打開燈箱 (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></xmp>
[hr]
CSS
<xmp>
@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}</xmp>
[hr]
<h2>2015/5/28上課影音</h2>
HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0
<iframe width="853" height="480" src="https://www.youtube.com/embed/Ukgn3h2aFo0?rel=0" frameborder="0" allowfullscreen></iframe>
[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/~css104-2c/hw08/ex/hw08-1025445070
<h2>學長姊範例</h2>
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
<b>重點：</b>
<b>CSS絕對定位：position: absolute;
CSS定位座標：top, bottom, left, right</b>
位分為：絕對定位position: absolute; 與相對定位 position: relative;
本範例使用的是絕對定位
[img] http://i.imgur.com/kPNRsjk.jpg [/img]
本範例使用的是絕對定位
[img]http://i.imgur.com/kPNRsjk.jpg[/img]
<b>1.於Menber #section3 加入物件跳動元素</b>
<xmp><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/tumblr_m691uhqdUJ1rxs8dio1_1280.jpg" width="150" height="51"></a></li>
<li><img style="position:absolute; tion1"><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">
<900d="mask">
<li id="section1" class="box">
<div class="content">
<img src="images/2ne1.jpg" width="900" height="475">
</div>
</li> <!--首頁結束 -->
tumblr_n1nnulp9md1rm05eoo1_500 <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/1920251_729079367141260_2590136934394327577_n.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(){
<li id="section4" class="box">
<!--FIRST-->
<div class="content">
<center>
<img src="images/3.jpg" width="800" height="533">
}, 2000);
// 隱藏燈箱
$('.display_panel').hide();
// 打開燈箱 (fadeIn)
$('#point1').click(function (){
$('#s1panel_1').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_panel').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.displ // 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@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;
}
#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,
pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@charset "UTF-8";
/* CSS Document */
ter>
</div>
<li id="section5" class="box"><!--FIRST-->
.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}</xmp>
[hr]
<h2>2015/5/28上課影音</h2>
HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0
<iframe width="853" height="480" src="https://www.youtube.com/embed/Ukgn3h2aFo0?rel=0" frameborder="0" allowfullscreen></iframe>
[hr]
範例檔案下載
http://mepopedia.com/~css104-2a/hw08/ex/hw08,zip
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224 <div class="co
ntent">
<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);
setInterhttp://mepopedia.com/~css104-2a/hw08/ex/hw08,zip
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224http://mepopedia.com/~css104-2a/hw08/ex/hw08.zip
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224http://mepopedia.com/~css104-2c/hw08/ex/hw08.zip
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224val(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;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@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;
}
#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;
}
.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: 地標設定 */
-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;
// 打開燈箱 (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></xmp>
[hr]
CSS
<xmp>
@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}</xmp>
[hr]
<h2>2015/5/28上課影音</h2>
HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0
<iframe width="853" height="480" src="https://www.youtube.com/embed/Ukgn3h2aFo0?rel=0" frameborder="0" allowfullscreen></iframe>
[hr]
範例檔案下載
http://mepopedia.com/~css104-2c/hw08/ex/hw08.rar
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224
Changed By: JinJin
Change Date: May 17, 2016 03:27PM
[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果
Change Date: May 17, 2016 03:27PM
[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果
<h2>step5: 地標設定</h2>
上課範例
http://mepopedia.com/~css104-2c/hw08/ex/hw08-1025445070
<h2>學長姊範例</h2>
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
<b>重點：</b>
<b>CSS絕對定位：position: absolute;
CSS定位座標：top, bottom, left, right</b>
位分為：絕對定位position: absolute; 與相對定位 position: relative;
本範例使用的是絕對定位
[img] http://i.imgur.com/kPNRsjk.jpg [/img]
本範例使用的是絕對定位
[img]http://i.imgur.com/kPNRsjk.jpg[/img]
<b>1.於Menber #section3 加入物件跳動元素</b>
<xmp><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/tumblr_m691uhqdUJ1rxs8dio1_1280.jpg" width="150" height="51"></a></li>
<li><img style="position:absolute; tion1"><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">
<900d="mask">
<li id="section1" class="box">
<div class="content">
<img src="images/2ne1.jpg" width="900" height="475">
</div>
</li> <!--首頁結束 -->
tumblr_n1nnulp9md1rm05eoo1_500 <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/1920251_729079367141260_2590136934394327577_n.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(){
<li id="section4" class="box">
<!--FIRST-->
<div class="content">
<center>
<img src="images/3.jpg" width="800" height="533">
}, 2000);
// 隱藏燈箱
$('.display_panel').hide();
// 打開燈箱 (fadeIn)
$('#point1').click(function (){
$('#s1panel_1').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_panel').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.displ // 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@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;
}
#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;
}
.content {
width: 1000px;
height: /* STEP top: 0;
margin: 0 auto;
position: relative;
/*border: 1px #0CF solid;*/
}
/* 水平垂直置中 */
.content .text {
font-size: 1em;
width: 6002: 頂部選單 */
#header ul {
margin: 0 auto;
width: 1000px;
height: 100px;
}
#header li {
float: left;
padding-top: 10px;
}
#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,
pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@charset "UTF-8";
/* CSS Document */
ter>
</div>
<li id="section5" class="box"><!--FIRST-->
.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}</xmp>
[hr]
<h2>2015/5/28上課影音</h2>
HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0
<iframe width="853" height="480" src="https://www.youtube.com/embed/Ukgn3h2aFo0?rel=0" frameborder="0" allowfullscreen></iframe>
[hr]
範例檔案下載
http://mepopedia.com/~css104-2a/hw08/ex/hw08,zip
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224 <div class="co
ntent">
<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);
setInterhttp://mepopedia.com/~css104-2a/hw08/ex/hw08,zip
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224http://mepopedia.com/~css104-2a/hw08/ex/hw08.zip
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224http://mepopedia.com/~css104-2c/hw08/ex/hw08.zip
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224val(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;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@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;
}
#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;
}
.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: 地標設定 */
-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;
// 打開燈箱 (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></xmp>
[hr]
CSS
<xmp>
@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}</xmp>
[hr]
<h2>2015/5/28上課影音</h2>
HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0
<iframe width="853" height="480" src="https://www.youtube.com/embed/Ukgn3h2aFo0?rel=0" frameborder="0" allowfullscreen></iframe>
[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/~css104-2c/hw08/ex/hw08-1025445070
<h2>學長姊範例</h2>
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
<b>重點：</b>
<b>CSS絕對定位：position: absolute;
CSS定位座標：top, bottom, left, right</b>
位分為：絕對定位position: absolute; 與相對定位 position: relative;
本範例使用的是絕對定位
[img] http://i.imgur.com/kPNRsjk.jpg [/img]
本範例使用的是絕對定位
[img]http://i.imgur.com/kPNRsjk.jpg[/img]
<b>1.於Menber #section3 加入物件跳動元素</b>
<xmp><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/tumblr_m691uhqdUJ1rxs8dio1_1280.jpg" width="150" height="51"></a></li>
<li><img style="position:absolute; tion1"><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">
<900d="mask">
<li id="section1" class="box">
<div class="content">
<img src="images/2ne1.jpg" width="900" height="475">
</div>
</li> <!--首頁結束 -->
tumblr_n1nnulp9md1rm05eoo1_500 <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/1920251_729079367141260_2590136934394327577_n.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(){
<li id="section4" class="box">
<!--FIRST-->
<div class="content">
<center>
<img src="images/3.jpg" width="800" height="533">
}, 2000);
// 隱藏燈箱
$('.display_panel').hide();
// 打開燈箱 (fadeIn)
$('#point1').click(function (){
$('#s1panel_1').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_panel').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.displ // 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@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;
}
#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;
}
.content {
width: 1000px;
height: /* STEP top: 0;
margin: 0 auto;
position: relative;
/*border: 1px #0CF solid;*/
}
/* 水平垂直置中 */
.content .text {
font-size: 1em;
width: 6002: 頂部選單 */
#header ul {
margin: 0 auto;
width: 1000px;
height: 100px;
}
#header li {
float: left;
padding-top: 10px;
}
#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,
pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@charset "UTF-8";
/* CSS Document */
ter>
</div>
<li id="section5" class="box"><!--FIRST-->
.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}</xmp>
[hr]
<h2>2015/5/28上課影音</h2>
HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0
<iframe width="853" height="480" src="https://www.youtube.com/embed/Ukgn3h2aFo0?rel=0" frameborder="0" allowfullscreen></iframe>
[hr]
範例檔案下載
http://mepopedia.com/~css104-2a/hw08/ex/hw08,zip
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224 <div class="co
ntent">
<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);
setInterhttp://mepopedia.com/~css104-2a/hw08/ex/hw08,zip
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224http://mepopedia.com/~css104-2a/hw08/ex/hw08.zip
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224http://mepopedia.com/~css104-2c/hw08/ex/hw08.zip
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224val(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;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@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;
}
#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;
}
.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: 地標設定 */
-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;
// 打開燈箱 (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></xmp>
[hr]
CSS
<xmp>
@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}</xmp>
[hr]
<h2>2015/5/28上課影音</h2>
HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0
<iframe width="853" height="480" src="https://www.youtube.com/embed/Ukgn3h2aFo0?rel=0" frameborder="0" allowfullscreen></iframe>
[hr]
範例檔案下載
http://mepopedia.com/~css104-2c/hw08/ex/hw08.rar
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224
Changed By: JinJin
Change Date: May 17, 2016 03:07PM
[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果
Change Date: May 17, 2016 03:07PM
[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果
<h2>step5: 地標設定</h2>
上課範例
http://mepopedia.com/~css104-2c/hw08/ex/hw08-1025445070
<h2>學長姊範例</h2>
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
<b>重點：</b>
<b>CSS絕對定位：position: absolute;
CSS定位座標：top, bottom, left, right</b>
位分為：絕對定位position: absolute; 與相對定位 position: relative;
本範例使用的是絕對定位
[img] http://i.imgur.com/kPNRsjk.jpg [/img]
本範例使用的是絕對定位
[img]http://i.imgur.com/kPNRsjk.jpg[/img]
<b>1.於Menber #section3 加入物件跳動元素</b>
<xmp><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/tumblr_m691uhqdUJ1rxs8dio1_1280.jpg" width="150" height="51"></a></li>
<li><img style="position:absolute; tion1"><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">
<900d="mask">
<li id="section1" class="box">
<div class="content">
<img src="images/2ne1.jpg" width="900" height="475">
</div>
</li> <!--首頁結束 -->
tumblr_n1nnulp9md1rm05eoo1_500 <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/1920251_729079367141260_2590136934394327577_n.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(){
<li id="section4" class="box">
<!--FIRST-->
<div class="content">
<center>
<img src="images/3.jpg" width="800" height="533">
}, 2000);
// 隱藏燈箱
$('.display_panel').hide();
// 打開燈箱 (fadeIn)
$('#point1').click(function (){
$('#s1panel_1').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_panel').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.displ // 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@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;
}
#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 */
ORTANT */
th: 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;
}
#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;
}
.content {
width: 1000px;
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱 height: /* STEP top: 0;
margin: 0 auto;
position: relative;
/*border: 1px #0CF solid;*/
}
/* 水平垂直置中 */
.content .text {
font-size: 1em;
width: 6002: 頂部選單 */
#header ul {
margin: 0 auto;
width: 1000px;
height: 100px;
}
#header li {
float: left;
padding-top: 10px;
}
#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,
pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@charset "UTF-8";
/* CSS Document */
ter>
</div>
<li id="section5" class="box"><!--FIRST-->
.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}</xmp>
[hr]
<h2>2015/5/28上課影音</h2>
HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0
<iframe width="853" height="480" src="https://www.youtube.com/embed/Ukgn3h2aFo0?rel=0" frameborder="0" allowfullscreen></iframe>
[hr]
範例檔案下載
http://mepopedia.com/~css104-2a/hw08/ex/hw08,zip
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224 <div class="co
ntent">
<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);
setInterhttp://mepopedia.com/~css104-2a/hw08/ex/hw08,zip
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224http://mepopedia.com/~css104-2a/hw08/ex/hw08.zip
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224http://mepopedia.com/~css104-2c/hw08/ex/hw08.zip
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224val(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;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@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;
}
#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;
}
.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: 地標設定 */
-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;
// 打開燈箱 (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></xmp>
[hr]
CSS
<xmp>
@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}</xmp>
[hr]
<h2>2015/5/28上課影音</h2>
HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0
<iframe width="853" height="480" src="https://www.youtube.com/embed/Ukgn3h2aFo0?rel=0" frameborder="0" allowfullscreen></iframe>
[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/~css104-2c/hw08/ex/hw08-1025445070
<h2>學長姊範例</h2>
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
<b>重點：</b>
<b>CSS絕對定位：position: absolute;
CSS定位座標：top, bottom, left, right</b>
位分為：絕對定位position: absolute; 與相對定位 position: relative;
本範例使用的是絕對定位
[img] http://i.imgur.com/kPNRsjk.jpg [/img]
本範例使用的是絕對定位
[img]http://i.imgur.com/kPNRsjk.jpg[/img]
<b>1.於Menber #section3 加入物件跳動元素</b>
<xmp><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/tumblr_m691uhqdUJ1rxs8dio1_1280.jpg" width="150" height="51"></a></li>
<li><img style="position:absolute; tion1"><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">
<900d="mask">
<li id="section1" class="box">
<div class="content">
<img src="images/2ne1.jpg" width="900" height="475">
</div>
</li> <!--首頁結束 -->
tumblr_n1nnulp9md1rm05eoo1_500 <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/1920251_729079367141260_2590136934394327577_n.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(){
<li id="section4" class="box">
<!--FIRST-->
<div class="content">
<center>
<img src="images/3.jpg" width="800" height="533">
}, 2000);
// 隱藏燈箱
$('.display_panel').hide();
// 打開燈箱 (fadeIn)
$('#point1').click(function (){
$('#s1panel_1').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_panel').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.displ // 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@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;
}
#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 */
ORTANT */
th: 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;
}
#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;
}
.content {
width: 1000px;
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱 height: /* STEP top: 0;
margin: 0 auto;
position: relative;
/*border: 1px #0CF solid;*/
}
/* 水平垂直置中 */
.content .text {
font-size: 1em;
width: 6002: 頂部選單 */
#header ul {
margin: 0 auto;
width: 1000px;
height: 100px;
}
#header li {
float: left;
padding-top: 10px;
}
#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,
pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@charset "UTF-8";
/* CSS Document */
ter>
</div>
<li id="section5" class="box"><!--FIRST-->
.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}</xmp>
[hr]
<h2>2015/5/28上課影音</h2>
HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0
<iframe width="853" height="480" src="https://www.youtube.com/embed/Ukgn3h2aFo0?rel=0" frameborder="0" allowfullscreen></iframe>
[hr]
範例檔案下載
http://mepopedia.com/~css104-2a/hw08/ex/hw08,zip
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224 <div class="co
ntent">
<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);
setInterhttp://mepopedia.com/~css104-2a/hw08/ex/hw08,zip
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224http://mepopedia.com/~css104-2a/hw08/ex/hw08.zip
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224http://mepopedia.com/~css104-2c/hw08/ex/hw08.zip
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224val(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;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@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;
}
#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;
}
.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: 地標設定 */
-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;
// 打開燈箱 (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></xmp>
[hr]
CSS
<xmp>
@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}</xmp>
[hr]
<h2>2015/5/28上課影音</h2>
HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0
<iframe width="853" height="480" src="https://www.youtube.com/embed/Ukgn3h2aFo0?rel=0" frameborder="0" allowfullscreen></iframe>
[hr]
範例檔案下載
http://mepopedia.com/~css104-2c/hw08/ex/hw08.rar
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224
Changed By: JinJin
Change Date: May 17, 2016 01:08PM
[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果
Change Date: May 17, 2016 01:08PM
[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果
<h2>step5: 地標設定</h2>
tp://mepopedia.com/~css104-2c/hw08/ex/hw08-1025445070
<h2>學長姊範例</h2>
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
hw08/ex/0519BPL
<b>重點：</b>
<b>CSS絕對定位：position: absolute;
CSS定位座標：top, bottom, left, right</b>
位分為：絕對定位position: absolute; 與相對定位 position: relative;
本範例使用的是絕對定位
[img] http://i.imgur.com/kPNRsjk.jpg [/img]
本範例使用的是絕對定位
[img]http://i.imgur.com/kPNRsjk.jpg[/img]
<b>1.於Menber #section3 加入物件跳動元素</b>
<xmp><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/tumblr_m691uhqdUJ1rxs8dio1_1280.jpg" width="150" height="51"></a></li>
<li><img style="position:absolute; tion1"><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">
<900d="mask">
<li id="section1" class="box">
<div class="content">
<img src="images/2ne1.jpg" width="900" height="475">
</div>
</li> <!--首頁結束 -->
tumblr_n1nnulp9md1rm05eoo1_500 <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/1920251_729079367141260_2590136934394327577_n.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(){
<li id="section4" class="box">
<!--FIRST-->
<div class="content">
<center>
<img src="images/3.jpg" width="800" height="533">
}, 2000);
// 隱藏燈箱
$('.display_panel').hide();
// 打開燈箱 (fadeIn)
$('#point1').click(function (){
$('#s1panel_1').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_panel').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.displ // 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@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;
}
#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 */
th: 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;
}
#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;
}
.content {
width: 1000px;
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱 height: /* STEP top: 0;
margin: 0 auto;
position: relative;
/*border: 1px #0CF solid;*/
}
/* 水平垂直置中 */
.content .text {
font-size: 1em;
width: 6002: 頂部選單 */
#header ul {
margin: 0 auto;
width: 1000px;
height: 100px;
}
#header li {
float: left;
padding-top: 10px;
}
#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,
pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@charset "UTF-8";
/* CSS Document */
ter>
</div>
<li id="section5" class="box"><!--FIRST-->
.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}</xmp>
[hr]
<h2>2015/5/28上課影音</h2>
HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0
<iframe width="853" height="480" src="https://www.youtube.com/embed/Ukgn3h2aFo0?rel=0" frameborder="0" allowfullscreen></iframe>
[hr]
範例檔案下載
http://mepopedia.com/~css104-2a/hw08/ex/hw08,zip
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224 <div class="co
ntent">
<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);
setInterhttp://mepopedia.com/~css104-2a/hw08/ex/hw08,zip
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224http://mepopedia.com/~css104-2a/hw08/ex/hw08.zip
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224http://mepopedia.com/~css104-2c/hw08/ex/hw08.zip
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224val(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;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@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;
}
#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;
}
.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: 地標設定 */
-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;
// 打開燈箱 (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></xmp>
[hr]
CSS
<xmp>
@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}</xmp>
[hr]
<h2>2015/5/28上課影音</h2>
HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0
<iframe width="853" height="480" src="https://www.youtube.com/embed/Ukgn3h2aFo0?rel=0" frameborder="0" allowfullscreen></iframe>
[hr]
範例檔案下載
http://mepopedia.com/~css104-2c/hw08/ex/hw08.rar
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224
tp://mepopedia.com/~css104-2c/hw08/ex/hw08-1025445070
<h2>學長姊範例</h2>
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
hw08/ex/0519BPL
<b>重點：</b>
<b>CSS絕對定位：position: absolute;
CSS定位座標：top, bottom, left, right</b>
位分為：絕對定位position: absolute; 與相對定位 position: relative;
本範例使用的是絕對定位
[img] http://i.imgur.com/kPNRsjk.jpg [/img]
本範例使用的是絕對定位
[img]http://i.imgur.com/kPNRsjk.jpg[/img]
<b>1.於Menber #section3 加入物件跳動元素</b>
<xmp><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/tumblr_m691uhqdUJ1rxs8dio1_1280.jpg" width="150" height="51"></a></li>
<li><img style="position:absolute; tion1"><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">
<900d="mask">
<li id="section1" class="box">
<div class="content">
<img src="images/2ne1.jpg" width="900" height="475">
</div>
</li> <!--首頁結束 -->
tumblr_n1nnulp9md1rm05eoo1_500 <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/1920251_729079367141260_2590136934394327577_n.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(){
<li id="section4" class="box">
<!--FIRST-->
<div class="content">
<center>
<img src="images/3.jpg" width="800" height="533">
}, 2000);
// 隱藏燈箱
$('.display_panel').hide();
// 打開燈箱 (fadeIn)
$('#point1').click(function (){
$('#s1panel_1').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_panel').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.displ // 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@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;
}
#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 */
th: 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;
}
#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;
}
.content {
width: 1000px;
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱 height: /* STEP top: 0;
margin: 0 auto;
position: relative;
/*border: 1px #0CF solid;*/
}
/* 水平垂直置中 */
.content .text {
font-size: 1em;
width: 6002: 頂部選單 */
#header ul {
margin: 0 auto;
width: 1000px;
height: 100px;
}
#header li {
float: left;
padding-top: 10px;
}
#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,
pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@charset "UTF-8";
/* CSS Document */
ter>
</div>
<li id="section5" class="box"><!--FIRST-->
.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}</xmp>
[hr]
<h2>2015/5/28上課影音</h2>
HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0
<iframe width="853" height="480" src="https://www.youtube.com/embed/Ukgn3h2aFo0?rel=0" frameborder="0" allowfullscreen></iframe>
[hr]
範例檔案下載
http://mepopedia.com/~css104-2a/hw08/ex/hw08,zip
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224 <div class="co
ntent">
<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);
setInterhttp://mepopedia.com/~css104-2a/hw08/ex/hw08,zip
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224http://mepopedia.com/~css104-2a/hw08/ex/hw08.zip
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224http://mepopedia.com/~css104-2c/hw08/ex/hw08.zip
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224val(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;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point2').click(function (){
$('#s1panel_2').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point3').click(function (){
$('#s1panel_3').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
// 隱藏燈箱
$('.display_pane1').hide();
// 打開燈箱 (fadeIn)
$('#point4').click(function (){
$('#s1panel_4').fadeIn(500);
return false;
});
// 關閉燈箱
$('.x_btn').click(function (){
$('.display_pane1').hide();
return false;
});
</script>
</html></xmp>
[hr]
CSS
<xmp>
@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;
}
#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;
}
.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: 地標設定 */
-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;
// 打開燈箱 (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></xmp>
[hr]
CSS
<xmp>
@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}</xmp>
[hr]
<h2>2015/5/28上課影音</h2>
HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0
<iframe width="853" height="480" src="https://www.youtube.com/embed/Ukgn3h2aFo0?rel=0" frameborder="0" allowfullscreen></iframe>
[hr]
範例檔案下載
http://mepopedia.com/~css104-2c/hw08/ex/hw08.rar
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224
Original Message
作者: JinJinDate: May 17, 2016 01:06PM
[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果
step5: 地標設定
hw08/ex/0519BPL
重點：
CSS絕對定位：position: absolute;
CSS定位座標：top, bottom, left, right
位分為：絕對定位position: absolute; 與相對定位 position: relative;
本範例使用的是絕對定位
[img] http://i.imgur.com/kPNRsjk.jpg [/img]
本範例使用的是絕對定位
[img]http://i.imgur.com/kPNRsjk.jpg[/img]
1.於Menber #section3 加入物件跳動元素
[hr]
CSS
[hr]
CSS
[hr]
2015/5/28上課影音
HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0
[hr]
範例檔案下載
http://mepopedia.com/~css104-2a/hw08/ex/hw08,zip
參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224