1. step5: 地標設定
重點：
CSS絕對定位：position: absolute;
CSS定位座標：top, bottom, left, right
1.加入視角及地標元件
<![CDATA[<html>
<head>
<title>FunTaipei</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<base href="http://www.funtaipei.tw/" />
<link rel="stylesheet" type="text/css" href="css/reset.css">
<!--<link rel="stylesheet" type="text/css" href="css/main.css">-->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/small.css">
<![endif]-->
<style>
/* STEP 1: 佈景設計 */
body {
width:100%;
background-image:url(../images/bg.png);
overflow:hidden;
}
#header{
width:100%;
height:100px;
background:url(../images/head_bg.png);
}
/* STEP 2: 頂部選單 */
#header ul {
margin: 0 auto;
width: 1000px;
height: 100px;
}
#header li {
float:left;
}
#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:#633;
}
/* SETP3: 頂部選單細部設計 */
#header ul li:nth-child(1){
margin:-10px 60px 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:#903;}
/* 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: 3em;
width: 300px; height: 100px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
</style>
</head>
<body>
<div id="header"><!--HEADER-->
<ul id="menu">
<li><a href="#section1"><img src="images/Logo.png"/></a>
<li><a href="#section2">心 台 北<p style="font-size:8px">Taipei</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc1.png"><a href="#section3">視 角<p style="font-size:8px">Visual</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc2.png"><a href="#section4">聆 聽<p style="font-size:8px">Listen</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc3.png"><a href="#section5">尋 味<p style="font-size:8px">Taste</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc4.png"><a href="#section6">聞 香<p style="font-size:8px">Smell</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc5.png"><a href="#section7">觸 動<p style="font-size:8px">Feel</p></a></li>
</ul>
</div><!--HEADER結束-->
<div id="wrapper">
<ul id="mask">
<li id="section1" class="box"><!--首頁 -->
<div class="content">
<div class="text">HOME PAGE</div>
</div>
</li><!--首頁結束 -->
<li id="section2" class="box"><!--FIRST-->
<div class="content">
<div class="text">FIRST PAGE</div>
</div>
</li><!--END OF FIRST PAGE-->
<li id="section3" class="box"><!--FIRST-->
<div class="content">
<div class="text">視 角</div>
<a href="#" class="point" id="point1"><img src="images/s1_point1.png" /></a>
<a href="#" class="point" id="point2"><img src="images/s1_point2.png" /></a>
<a href="#" class="point" id="point3"><img src="images/s1_point3.png" /></a>
<a href="#" class="point" id="point4"><img src="images/s1_point4.png" /></a>
<a href="#" class="point" id="point5"><img src="images/s1_point5.png" /></a>
</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="http://www.funtaipei.tw/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="http://www.funtaipei.tw/js/jquery.scrollTo-1.4.2-min.js"></script>
<!--<script type="text/javascript" src="http://www.funtaipei.tw/js/main.js"></script>-->
<script type="text/javascript" src="http://www.funtaipei.tw/js/respond.min.js"></script>
<script>
$(document).ready(function() {
$('#menu a').click(function () {
$('#wrapper').scrollTo($(this).attr('href'), 1000);
return false;
});
});
</script>
</html>]]>
[hr]
2.加入地標定位設定CSS
<![CDATA[<html>
<head>
<title>FunTaipei</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<base href="http://www.funtaipei.tw/" />
<link rel="stylesheet" type="text/css" href="css/reset.css">
<!--<link rel="stylesheet" type="text/css" href="css/main.css">-->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/small.css">
<![endif]-->
<style>
/* STEP 1: 佈景設計 */
body {
width:100%;
background-image:url(../images/bg.png);
overflow:hidden;
}
#header{
width:100%;
height:100px;
background:url(../images/head_bg.png);
}
/* STEP 2: 頂部選單 */
#header ul {
margin: 0 auto;
width: 1000px;
height: 100px;
}
#header li {
float:left;
}
#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:#633;
}
/* SETP3: 頂部選單細部設計 */
#header ul li:nth-child(1){
margin:-10px 60px 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:#903;}
/* STEP4: 主佈局設計 */
#wrapper {
//width: 100%;
//height: 100%;
//position: absolute;
overflow: hidden;
}
#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: 3em;
text-align: center;
width: 300px; height: 100px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
/* SETP5: 地標設定 */
/* 絕對定位，每一地標給予一座標值 */
#point1, #point2, #point3, #point4, #point5 {
position: absolute;
}
#point1 { top:300px; left:650px; }
#point2 { top:320px; right:80px; }
#point3 { top:320px; left:520px; }
#point4 { top:400px; left:670px; }
#point5 { top:430px; right:40px; }
</style>
</head>
<body>
<div id="header"><!--HEADER-->
<ul id="menu">
<li><a href="#section1"><img src="images/Logo.png"/></a>
<li><a href="#section2">心 台 北<p style="font-size:8px">Taipei</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc1.png"><a href="#section3">視 角<p style="font-size:8px">Visual</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc2.png"><a href="#section4">聆 聽<p style="font-size:8px">Listen</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc3.png"><a href="#section5">尋 味<p style="font-size:8px">Taste</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc4.png"><a href="#section6">聞 香<p style="font-size:8px">Smell</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc5.png"><a href="#section7">觸 動<p style="font-size:8px">Feel</p></a></li>
</ul>
</div><!--HEADER結束-->
<div id="wrapper">
<ul id="mask">
<li id="section1" class="box"><!--首頁 -->
<div class="content">
<div class="text">HOME PAGE</div>
</div>
</li><!--首頁結束 -->
<li id="section2" class="box"><!--FIRST-->
<div class="content">
<div class="text">FIRST PAGE</div>
</div>
</li><!--END OF FIRST PAGE-->
<li id="section3" class="box"><!--FIRST-->
<div class="content">
<div class="text">視 角</div>
<a href="#" class="point" id="point1"><img src="images/s1_point1.png" /></a>
<a href="#" class="point" id="point2"><img src="images/s1_point2.png" /></a>
<a href="#" class="point" id="point3"><img src="images/s1_point3.png" /></a>
<a href="#" class="point" id="point4"><img src="images/s1_point4.png" /></a>
<a href="#" class="point" id="point5"><img src="images/s1_point5.png" /></a>
</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.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
<!--<script type="text/javascript" src="js/main.js"></script>-->
<script type="text/javascript" src="js/respond.min.js"></script>
<script>
$(function() {
// 頁面捲動
$('#menu a').click(function () {
$('#wrapper').scrollTo($(this).attr('href'), 1000);
// 防止目前頁面轉到「超連結」所指定的網頁
return false;
});
});
</script>
</html>]]>
[hr]
2. STEP6 HTML元素跳動效果>
1. 固定間隔執行函式
<![CDATA[ setInterval(function(){
// 要執行的函式
}, 5000);]]>
[hr]
2. jQuery動畫效果
<![CDATA[ $("HTML元素").animate({top:"-=15px"},1000); // 向上15px
$("HTML元素").animate({top:"+=15px"},1000); // 向下15px]]>
[hr]
3. 綜合效果
<![CDATA[ setInterval(function(){
$(".point").animate({top:"-=15px"},1000).animate({top:"+=15px"}, 1000);
}, 2000);]]>
[hr]
3. STEP7 燈箱式跳出頁面效果
<![CDATA[<html><head>
<title>FunTaipei</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<base href="http://www.funtaipei.tw/" />
<link rel="stylesheet" type="text/css" href="css/reset.css">
<!--<link rel="stylesheet" type="text/css" href="css/main.css">-->
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="css/small.css">
<![endif]-->
<style>
/* STEP 1: 佈景設計 */
body {
width:100%;
background-image:url(../images/bg.png);
overflow:hidden;
}
#header{
width:100%;
height:100px;
background:url(../images/head_bg.png);
}
/* STEP 2: 頂部選單 */
#header ul {
margin: 0 auto;
width: 1000px;
height: 100px;
}
#header li {
float:left;
}
#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:#633;
}
/* SETP3: 頂部選單細部設計 */
#header ul li:nth-child(1){
margin:-10px 60px 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:#903;}
/* STEP4: 主佈局設計 */
#wrapper {
//width: 100%;
//height: 100%;
//position: absolute;
overflow: hidden;
}
#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: 3em;
text-align: center;
width: 300px; height: 100px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
/* 地標設定 */
#point1, #point2, #point3, #point4, #point5 {
position: absolute;
}
#point1 { top:300px; left:650px; }
#point2 { top:320px; right:80px; }
#point3 { top:320px; left:520px; }
#point4 { top:400px; left:670px; }
#point5 { top:430px; right:40px; }
/* 景點設計 */
/* 跳出燈箱設計 */
.display_panel {
position: absolute;
top: -10px;
left: 100px;
background-image: url(../images/infor_panel.png);
width: 655px;
height: 537px;
z-index: 999;
padding-top: 60px;
padding-left: 100px;
padding-right: 60px;
}
.description { margin-top: 15px; }
.x_btn{ position: absolute; top:20px; right:10px; cursor:pointer; z-index: 10000}
</style>
</head>
<body>
<div id="header"><!--HEADER-->
<ul id="menu">
<li><a href="#section1"><img src="images/Logo.png"/></a>
<li><a href="#section2">心 台 北<p style="font-size:8px">Taipei</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc1.png"><a href="#section3">視 角<p style="font-size:8px">Visual</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc2.png"><a href="#section4">聆 聽<p style="font-size:8px">Listen</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc3.png"><a href="#section5">尋 味<p style="font-size:8px">Taste</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc4.png"><a href="#section6">聞 香<p style="font-size:8px">Smell</p></a></li>
<li><img style="position:absolute; padding:28px 9px;" src="images/doc5.png"><a href="#section7">觸 動<p style="font-size:8px">Feel</p></a></li>
</ul>
</div><!--HEADER結束-->
<div id="wrapper">
<ul id="mask">
<li id="section1" class="box"><!--首頁 -->
<div class="content">
<div class="text">HOME PAGE</div>
</div>
</li><!--首頁結束 -->
<li id="section2" class="box"><!--FIRST-->
<div class="content">
<div class="text">FIRST PAGE</div>
</div>
</li><!--END OF FIRST PAGE-->
<li id="section3" class="box"><!--FIRST-->
<div class="content">
<div class="text">視 角</div>
<a href="#" class="point" id="point1"><img src="images/s1_point1.png" /></a>
<a href="#" class="point" id="point2"><img src="images/s1_point2.png" /></a>
<a href="#" class="point" id="point3"><img src="images/s1_point3.png" /></a>
<a href="#" class="point" id="point4"><img src="images/s1_point4.png" /></a>
<a href="#" class="point" id="point5"><img src="images/s1_point5.png" /></a>
<div class="display_panel" id="s1panel_1">
<div class="panel_title"><img src="images/s1_photo1_title.png"></div>
<div class="panel_phtoto"><img src="images/s1_photo1.png"></div>
<p class="description">
坐落在熱鬧的公館商圈內，有著一處與藝術結合的住宅區－寶藏巖國際藝術村，走了一小段的斜坡，映入眼簾的是一間廟宇「寶藏巖」，寶藏巖主要祭祀觀音佛祖， 是台北古老佛寺之一又稱為石碧潭寺，這裡目前已規劃成一個國際藝術村。寶藏巖聚落的地景特殊，巷弄蜿蜒，石梯起伏，沿著山坡構築錯落的風貌。放慢腳步隨著蜿蜒的巷弄走，細細的閱讀每間屋子令人動容的故事，有一些民宅已成為藝術家的工作室，轉過一個彎發現前方老舊的牆壁上雖然有著現代感的塗鴉，但不會讓人覺得有違和感。站在高處向遠方望去，看見不遠處高樓大廈林立，有種時空交錯的感覺，有機會來這裡走走，說不定能發現小驚喜。
</p>
<div class="x_btn"><img src="images/delete_btn.png"></div>
</div>
</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.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
<!--<script type="text/javascript" src="js/main.js"></script>-->
<script type="text/javascript" src="js/respond.min.js"></script>
<script>
$(function() {
// 頁面捲動
$('#menu a').click(function () {
$('#wrapper').scrollTo($(this).attr('href'), 1000);
// 防止目前頁面轉到「超連結」所指定的網頁
return false;
});
// HTML元素跳動效果
setInterval(function(){
$(".point").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;
});
</script>
</html>]]>
[hr]
4. 2015/5/28上課影音
HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0
[hr]
5. 上課影片
游標位置設定--CSS絕對定位
http://youtu.be/gRWUhiqFrCw
[hr]
游標動態效果-HTML元素跳動- jQuery動畫效果
[hr]
燈箱效果 jQuery燈箱式跳出頁面效果
http://youtu.be/vyIXMKT2yXc
Edited 16 time(s). Last edit at 06/03/2015 10:11PM by JinJin.
(
編輯記錄)
